title: Adjust the width of 2 divs using jQuery-Resizable
body: <p>I currently work on the following page:</p>
  
  <p><img src="https://i.stack.imgur.com/EUVuB.jpg" alt="schema of the page"></p>
  
  <p>divResizable has been modified by jQuery using the following code in <code>$().ready()</code></p>
  
  <pre><code> $("#divResizable").resizable({ handles: 'e' });
   $("#divResizable").bind("resize", function (event, ui) {
        $('#divContent').width(850 -(ui.size.width - 175));
   });
  </code></pre>
  
  <p>As you can see, I try to increase the width of divContent when divResizable gets smaller and the other way around. However, with this code, divContent doesn't always "grow" to the left side only, it sometimes extends to the right side to the irrelevant div, which doesn't make the resizing look good at all.</p>
  
  <p>Is there any input for a more sophisticated method to let the width of those 2 divs correspond? </p>
  
  <p>Something I could think of would be to set width of divContent to</p>
  
  <pre><code>(start of irrelevant - divResizable.width) == 850px
    ^ e.g 1025px          ^ e.g. 175px
  </code></pre>
  
  <p>How exactly would I do this using jQuery?</p>