Resize multiple divs to keep layout correct
<p>I am trying to make a layout similar to JSFiddle's layout, aka a resizable grid. You can see it in the code snippet below or in this <a href="https://jsfiddle.net/Vusa360/72xhr1wr/1/" rel="nofollow">JSFiddle</a>.</p>

<p><div class="snippet" data-lang="js" data-hide="true" data-console="true" data-babel="false">
<div class="snippet-code snippet-currently-hidden">
<pre class="snippet-code-js lang-js prettyprint-override"><code>$("#left").resizable({
  alsoResize: "#right",
  handles: "e"
});

$("#right").resizable({
  alsoResize: "#left",
  handles: "w"
});

$("#text").resizable({
  handles: "s"
});

$("#css").resizable({
  handles: "s"
});</code></pre>
<pre class="snippet-code-css lang-css prettyprint-override"><code>* {
  margin: 0;
  padding: 0;
  -webkit-box-sizing: border-box;
  -moz-box-sizing: border-box;
  box-sizing: border-box;
}

.section {
  float: left;
  width: 100%;
  border-style: solid;
  border-width: 1px;
  border-color: blue;
}
.section#text {
  clear: both;
  height: 20vh;
}
.section#css {
  clear: both;
  height: 30vh;
}
.section#animation {
  clear: both;
  height: 50vh;
}
.section#result {
  height: 100vh;
}
.section.container {
  width: 50%;
  border: 0;
}</code></pre>
<pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"&gt;&lt;/script&gt;
&lt;script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.js"&gt;&lt;/script&gt;
&lt;link href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.0/jquery-ui.min.css" rel="stylesheet" type="text/css" /&gt;

&lt;div id="left" class="section container"&gt;
  &lt;div id="text" class="section"&gt;&lt;/div&gt;
  &lt;div id="css" class="section"&gt;&lt;/div&gt;
  &lt;div id="animation" class="section"&gt;&lt;/div&gt;
&lt;/div&gt;
&lt;div id="right" class="section container"&gt;
  &lt;div id="result" class="section"&gt;&lt;/div&gt;
&lt;/div&gt;</code></pre>
</div>
</div>
</p>

<p>To be able to resize the <code>div</code> elements I am using the <code>jQueryUI</code> function <a href="http://api.jqueryui.com/resizable/" rel="nofollow">resizeable</a>. However, if you play with the code example, you will see that the grid is not contained to the initial screen size. Instead, the <code>div</code> elements can be resized into each other and off the screen.</p>

<p>As you will see in the code example using methods such as <a href="http://api.jqueryui.com/resizable/#option-alsoResize" rel="nofollow">alsoResize</a> don't work. I have also attempted to use methods such as <a href="http://api.jqueryui.com/resizable/#option-containment" rel="nofollow">containment</a> but that does not seem to help either.</p>

<p>I would appreciate any help in making this work properly</p>