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();

            current.data("originalPercentage", current[0].style.width.slice(0, -1));
            neighbor.data("originalPercentage", 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("originalPercentage") * dRatio;
            var dPercent = current.data("originalPercentage") - cPercent;
            var nPercent = neighbor.data("originalPercentage") - (-dPercent);

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

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

});