Two div re sizable opposite to each other

Question

I want to make two div resizable vertically. for example

Top div height is 400px and Bottom div height is 200. When I've resize bottom div 250px then top div height should be 350px.

I've using jQuery UI resizable:

Fiddle here

        $(document).ready(function() {
          $(".dv-bottom").resizable({
            handles: {
              'n': '.handle'
            }
          }).on("resize", function(event, ui) {
            $('.dv-bottom').height(600 - ui.size.height);
            $('.dv-top').css({
              top: '0'
            });;
          });
        });

<div class="dv-top">
</div>
<div class="dv-bottom">
  <div class="ui-resizable-handle ui-resizable-n handle"></div>

  <div class=" pane-content">

  </div>

</div>

Answer 1

Do something like this on resize:

hBottom = ui.size.height
$('.dv-bottom').height(hBottom).css('top',0);
hTop = 600 - hBottom;
$('.dv-top').height(hTop);

demo: https://jsfiddle.net/ofem40cf/