JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css">
<div id="container">
    <div id="top">
        some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
    </div>
    <div id="bottom" >
        some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
    </div>
</div>

CSS

#container{
    height: 200px; 
    width: 200px;
}
#top {
    background-color: #FF0000;
}
#bottom {
    background-color: #9999FF;
}

JavaScript

$(document).ready(function() {

    // initialise dimensions
    var containerHeight = $("#container").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()

    $("#top").resizable({
          handles: 's',
          maxHeight: maxHeight,
          minHeight: minHeight,
          resize: rebalance // whenever we resize, rebalance the panels
    });
    
    function rebalance() {
        var currentTopHeight = $("#top").height();
        $("#bottom").height(containerHeight - currentTopHeight);    
    }
});