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: 400;
    border: 1px solid Black;
    font-size: 0;
}
.panel {
    width: calc(50% - 1px);
    height: 120px;
    padding: 0.5em;
    background-color: White;
    display: inline-block;
}
.panel2 {
    background-color: White;
    border-left: 1px solid Black;
}
.ui-resizable-e { 
    cursor: e-resize; 
    width: 6px; 
    right: -4px; 
    top: 0; 
    bottom: 0; 
    background-color: gray;
}

JavaScript

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