JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.1/themes/base/jquery-ui.css"/>

<div id='outer'>
    <div id='inner'><div id='msg'></div></div>
</div>
<div id='log'>
</div>

CSS

#outer {
    margin: 4px;
    border: 1px solid blue;
    padding: 2px;
    width: 400px;
    height: 400px;
    border-bottom: 3px solid red;
}
#inner {
    border: 1px solid blue;
    margin: 2px;
    padding: 2px;
    height: 200px;
    width: 200px;
    border-right: 3px solid cyan;
}
#log {
    border: 1px solid black;
    width: 400px;
    height:40px;
    margin:4px;
    overflow: auto;
}

JavaScript

function resz()
{
    var w = $(window);
    var o = $('#outer');
    var i = $('#inner');
    $('#msg').html(
        "window("+w.width()+","+w.height()+")<br />"+
        "outer("+o.width()+","+o.height()+")<br />"+
        "inner("+i.width()+","+i.height()+")"
    );
}

function setInnerHt()
{
    $('#inner').height($('#outer').height()-10);
}

function setOuterHt()
{
    //$('#outer').height($(window).height()/2);
    setInnerHt();
}

function zlog(msg)
{
    var l = $('#log');
    var txt = l.text();
    txt += msg;
    l.text(txt);
}

$(window).resize(function() {
    zlog('w');
    resz();
    setOuterHt();
});

$('#outer').resize(function() {
    zlog('o');
    resz();
    setInnerHt();
});

$('#inner').resize(function() {
    zlog('i');
    resz();
});


$("#inner").resizable({ handles:"e", maxWidth:300, minWidth:100 });
$('#outer').resizable({ handles:"s" });

resz();
setOuterHt();