JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.21/themes/base/jquery-ui.css">
<div id="main">
    <div id="first">
        <div id="first-head">
            First
        </div>
        <div id="first-body">
            <p>First-1</p>
            <p>First-2</p>
            <p>First-3</p>
            <p>First-4</p>
            <p>First-5</p>
            <p>First-6</p>
        </div>
    </div>
    <div id='second'>
        <div id="second-head">
            Second

            <div class="ui-resizable-handle ui-resizable-n" id="ngrip"></div>
        </div>
        <div id="second-body">
            <p>Second-1</p>
            <p>Second-2</p>
            <p>Second-3</p>
            <p>Second-4</p>
            <p>Second-5</p>
            <p>Second-6</p>
        </div>
    </div>
</div>

CSS

#main {
    width:100%;
    height:300px;
    /* need to position the parent, because elements' position is calculated
       relative to the first positioned parent - that should be #main. */
    position:relative;
}
#first-head, #second-head {
    background-color:red;
    height:25px;
    font-size:1.3em;
    font-weight:bold;
}
/* both containers are full-width, and absolutely positioned in their parent */
#first, #second {
    position:absolute;
    width:100%;
}
/* pin the first to the top, and the second to the bottom */
#first {
    top:0;
}
#second {
    top:50%;
    bottom:0;
}

/* The body needs to leave space at the top for the header (25px) but none at the bottom */
#first-body, #second-body {
    overflow-y:auto;
    width:100%;
    position:absolute;
    top:25px;
    bottom:0;
}
#ngrip {
    position: absolute;
    width: 10px;
    height: 10px;
    background-color: #ffffff;
    border: 1px solid #000000;
    top: 18px;
    left: 50%;
}

JavaScript

// initialise dimensions
var containerHeight = $("#main").height();
var minHeight = containerHeight * 0.30; // min 30% height
var maxHeight = containerHeight - minHeight;

// call rebalance once on page load to make sure the panels start off right
rebalance()

function rebalance() {
    var currentBottomHeight = $("#second").height();
    $("#first").height(containerHeight - currentBottomHeight);    
}

$('#second').resizable({
    handles: {
        'n': '#ngrip',
    },
    maxHeight: maxHeight,
    minHeight: minHeight,
    resize:rebalance
});