title: JQuery UI draggable to adjust the divs size
body: <p>I have two divs, and I want them to share the 100% of the width of their parent. I also have a small divider in between, which allows them do dynamically resize them. But the total area must remain same. I have uploaded my solution: <a href="http://jsfiddle.net/aRQ7a/" rel="nofollow">http://jsfiddle.net/aRQ7a/</a></p>
  
  <p>However, because I decrease the size of the previous one, the slider goes back even further, they are not aligned properly. How can I fix this? My code is the below:</p>
  
  <p>CSS:</p>
  
  <pre><code>* {
      margin: 0px;
      padding: 0px;
  }
  div {
      display: inline-flex;
      height: 300px;
      padding: 0px;
      margin: 0px;
  }
  #part1 {
      width: 47%;
      background-color: red;
  }
  #part2 {
      width: 47%;
      background-color: green;
  }
  .divider {
      width: 5%;
      background-color: blue;
  }
  </code></pre>
  
  <p>HTML:</p>
  
  <pre><code>&lt;body&gt;
      &lt;div id="part1"&gt;&lt;/div&gt;
      &lt;div class="divider"&gt;&lt;/div&gt;
      &lt;div id="part2"&gt;&lt;/div&gt;
  &lt;/body&gt;
  </code></pre>
  
  <p>Javascript:</p>
  
  <pre><code>$(function () {
      var p1 = parseInt($("#part1").css("width"));
      var p2 = parseInt($("#part2").css("width"));
  
      $(".divider").draggable({
          axis: "x",
          containment: "parent",
          scroll: false,
          start: function(){
              p1 = parseInt($("#part1").css("width"));
              p2 = parseInt($("#part2").css("width"));
          },
          drag: function (event,  ui) {
              var a = parseInt($(this).css("left"));
              $(this).prev().css("width", p1 +  a);
              $(this).next().css("width", p2 -  a);            
          }
      });
  });
  </code></pre>