JSFiddle - React, Tailwind, and code Playground

by totszwai

HTML

<div class="wrapper">
    <div class="test" style="width: 50%; height: 200px;">current</div>
    <div class="test" style="width: 50%; height: 200px;">neighbor</div>
</div>

CSS

html, body {
    height: 100%;
    width: 100%;
}
.wrapper {
    position: absolute;
    top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    display: flex;
}
.test {
    border: 3px solid red;
}

JavaScript

$(document).ready(function () {

    $(".test").resizable({
        handles: 'e',
        ghost: true,
        distance: 5,
        animate: true,
        start: function (event, ui) {
            var current = $(this);
            var neighbor = current.next();

            if (!current.data("percentage")) {
                current.data("percentage", current[0].style.width.slice(0, -1));
            }
            if (!neighbor.data("percentage")) {
                neighbor.data("percentage", neighbor[0].style.width.slice(0, -1));
            }
        },
        stop: function (event, ui) {
            var current = ui.element;
            var neighbor = current.next();
            var dRatio = ui.helper.width() / ui.originalSize.width;

            var cPercent = current.data("percentage") * dRatio;
            var dPercent = current.data("percentage") - cPercent;
            var nPercent = neighbor.data("percentage") - (-dPercent);

            current.width(cPercent + "%");
            current.data("percentage", cPercent);
            neighbor.width(nPercent + "%");
            neighbor.data("percentage", nPercent);

        }
    }).on('resize', function (event) {
        event.stopPropagation();
    });

});