title: Resizable is causing other elements below it to move
body: <p>I am building a UI where I need to have two or more resizable and draggable DIVs.
  The problem that I am facing is that when you resize a div all the other divs that were originally below it are moving(changing their position). Please see <a href="https://jsfiddle.net/2f8g93nn/4/" rel="nofollow noreferrer">https://jsfiddle.net/2f8g93nn/4/</a> where I wrote an example of what I mean. In that example if you moved the second div to the right and resized the first div the position of the second div will change.</p>
  
  <p>HTML in jsfiddle.net:</p>
  
  <pre><code>&lt;!doctype html&gt;
    &lt;script src="//code.jquery.com/jquery-1.10.2.js"&gt;&lt;/script&gt;
    &lt;script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"&gt;&lt;/script&gt;
  
  &lt;div class="Element" id = "FirstDiv"  class="ui-widget-content"&gt;
    &lt;p&gt;First DIV&lt;/p&gt;
  &lt;/div&gt;
  &lt;div class="Element" id = "SecondDiv" class="ui-widget-content"&gt;
    &lt;p&gt;Second DIV&lt;/p&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>Javascript in jsfiddle.net:</p>
  
  <pre><code>   $(function() {
      $( ".Element" ).draggable();
       $( ".Element" ).resizable();   
    });
  </code></pre>
  
  <p>CSS in jsfiddle.net:</p>
  
  <pre><code>.Element { 
      width: 150px;
      height: 150px;
      padding: 0.5em;
      border:1px solid black; 
  }
  </code></pre>
  
  <p><img src="https://i.stack.imgur.com/IgzpV.png" alt="At the begining Second div is below first div"></p>
  
  <p><img src="https://i.stack.imgur.com/0SmiF.png" alt="We moved the second div to the right"></p>
  
  <p><img src="https://i.stack.imgur.com/RJwSN.png" alt="By increasing the size of the first div the position of the second div changed"></p>