JSFiddle - React, Tailwind, and code Playground

by cutsomeat

HTML

<div class="wrap" id="mydiv">
    <div class="panel panel1"></div>
    <div class="panel panel2"></div>
</div>

CSS

.wrap {
    width: 400px;
    height: 300px;
    border: 1px brown solid;
    font-size: 0;
}
.panel {
    width: 100%;
    height: 50%;
    padding: 0.5em;
    background-color: coral;
    display: inline-block;
}
.panel2 {
    background-color: lightblue;
}
.ui-resizable-e { 
    cursor: s-resize; 
    height: 8px;
    bottom: -5px;
    left: 0;
    right: 0;
    background-color: gray;
}

JavaScript

$(function () {
    $.fn.splitter = function() {
        $(":nth-child(1)", this).resizable({
            autoHide: true,
            handles: 's',
            resize: function(e, ui) {
                var parent = ui.element.parent();
                var rs = parent.height() - ui.element.outerHeight(),
                p2 = ui.element.next(),
                p2h = (rs - (p2.outerHeight() - p2.height()))/parent.height()*100+"%";
                p2.height(p2h);
            },
            stop: function(e, ui) {
                var parent = ui.element.parent();
                ui.element.css({ height: ui.element.height()/parent.height()*100+"%" });
            }
        });
    }
    $("#mydiv").splitter();
});