How to design two adjustable height divs

Hi, I would like to design the content with 2 div (top,bottom) as shown below.
top div contain google map.
bottom div should contain textboxes,buttons etc.

These two div’s should be with adjustable height. When i swipe down, the first div will increase size
and second div should decreased size. and when i swipe up vice versa .
Google map should be at centred when we shirnk/expand the divs as shown in the image.

Can you please suggest me that how can i achieve it.