title: Make sibling height change depending on contenteditable(s) height
body: <p>I have an example I cannot figure out,</p>
  
  <p>I have a container(<code>outer</code>) that contains three children, what I want is the middle container(div) to be resized in height depending on how big the contenteditable are. They should all "fit" into the outer-div.</p>
  
  <pre><code>&lt;div id="outer"&gt; //container
  
    &lt;div id="contenthead" contenteditable="true"&gt;head&lt;/div&gt;       
    &lt;div id="content"&gt; I am content &lt;/div&gt; &lt;!-- I should shrink or grow depending on the content editable --&gt;
  
    &lt;div id="contentend" contenteditable="true"&gt;end&lt;/div&gt;
  
  &lt;/div&gt;
  </code></pre>
  
  <p>I have tried using a <code>mutationobserver</code>, I have tried using <code>jquery ui</code> but even if they produce a solution they only work "so-so" sometimes not firing an event or loosing a pixel or two.  </p>
  
  <p>Anyone have any idea on how to do that? </p>
  
  <p>I made an example: <a href="https://jsfiddle.net/066pov55/1/" rel="nofollow">JSfiddle</a> , it should explain it better of what I am after. </p>