Jquery UI draggable doesn't resize other DIVs
<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>