JSFiddle - React, Tailwind, and code Playground

by Dhanck

HTML

<div class="container">
    <div id="resizable" class="ui-widget-content"></div>
    <div id="resizable2" class="ui-widget-content"></div>
</div>

CSS

body {
    margin:0;
    padding:0;
}
.container {
    overflow:hidden;
}
#resizable {
    width: 100%;
}
#resizable2 {
    width: 100%;
    overflow:auto;
}

JavaScript

$('#resizable2').css({
    'height': 500
});

winHeight = $( window ).height()-$('#resizable2').height();
//alert(winHeight);
//$('#resizable').height(winHeight - $('#resizable2').height());


$('#resizable').css({
    'height': winHeight
});


$(function () {
    $("#resizable").resizable({
        minHeight: winHeight,
        minWidth: $(window).width()
    });
});

$('.container').css({
    'height': $( window ).height()
});
//alert($( window ).height());