title: Jquery UI draggable doesn't resize other DIVs
body: <p><a href="http://plnkr.co/edit/9Vb9a4Keky2r5zOTtVLS?p=preview">In this plunk</a> I have three <code>DIV</code>s divided by two other <code>DIV</code>s that are draggable (gray color). When the draggable <code>DIV</code>s are dragged up/down or left/right, the other <code>DIV</code>s should be resized.</p>
  
  <p>The first draggable DIV works fine (the one on the left that resizes the other DIVs vertically). But the second draggable <code>DIV</code> doesn't work, even though the method is the same as the first draggable <code>DIV</code>. Any ideas how to fix this?</p>
  
  <p>Javascript</p>
  
  <pre><code>    var top1H, bottom1H;
        $( "#div1" ).draggable({
            axis: "y",
            start: function(event, ui) {
              shiftInitial = ui.position.top;
                top1H = $("#top1").height();
                bottom1H = $("#bottom1").height();
              },
            drag: function(event,ui) {
                var shift = ui.position.top;
                $("#top1").height(top1H + shift - shiftInitial);
                $("#bottom1").height(bottom1H - shift + shiftInitial);
              }
          });
  
      var right1W, left1W;
    $( "#div2" ).draggable({
            axis: "y",
            start: function(event, ui) {
              shiftInitial = ui.position.left;
                right1W = $("#right1").height();
                left1W = $("#left1").height();
              },
            drag: function(event,ui) {
                var shift = ui.position.left;
                $("#right1").height(right1W + shift - shiftInitial);
                $("#left1").height(left1W - shift + shiftInitial);
              }
          });
  </code></pre>
  
  <p>HTML </p>
  
  <pre><code>&lt;div&gt;
      &lt;div id="left1"&gt;
      &lt;div id="top1"&gt;&lt;/div&gt;
      &lt;div id="div1"&gt;&lt;/div&gt;
      &lt;div id="bottom1"&gt;&lt;/div&gt;
    &lt;/div&gt;
     &lt;div id="div2"&gt;&lt;/div&gt;
     &lt;div id="right1"&gt;&lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>CSS</p>
  
  <pre><code>#div1 { 
    width:180px;
    height:6px;
    background-color:#e0e0e0;
    cursor:ns-resize;
    position: absolute;
  }
  #div2{
    width:6px;
    height:200px;
    background-color:#e0e0e0;
    float:left;
    cursor:ew-resize;
  }
  #top1{
    width:180px;
    height:100px;
    background-color:orange;
  }
  #bottom1 {
    width:180px;
    height:100px;
    background-color:blue;
  }
  #left1{
    width:180px;
    height:200px;
    float:left;
    background-color:orange;
  }
  #right1{
    height:200px;
    background-color:red;
    width:100%;
  }
  </code></pre>