JSFiddle - React, Tailwind, and code Playground

by holden321

HTML

<div class="table">
    <div class="table-row">
        <div class="table-cell firsr">Ячейка 1</div>
        <div class="table-cell second">Ячейка 2</div>
    </div>
</div>

CSS

.table {
    display: table;
    width: 100%;
    border: 1px solid silver;
}

.table-row {
    display: table-row;
    
}
.table-cell {
    display: table-cell;
    border: 1px solid silver;
}

html, body {height:100%;}
body {margin:0;}
.table {height:100%;border:0;}

JavaScript

$(".firsr").resizable(
      {
        alsoResizeReverse: ".second",
        handles: 'e'
      }
    );


$.ui.plugin.add("resizable", "alsoResizeReverse", {

        start: function(event, ui) {

            var self = $(this).data("resizable"), o = self.options;

            var _store = function(exp) {
                $(exp).each(function() {
                    $(this).data("resizable-alsoresize-reverse", {
                        width: parseInt($(this).width(), 10), height: parseInt($(this).height(), 10),
                        left: parseInt($(this).css('left'), 10), top: parseInt($(this).css('top'), 10)
                    });
                });
            };

            if (typeof(o.alsoResizeReverse) == 'object' && !o.alsoResizeReverse.parentNode) {
                if (o.alsoResizeReverse.length) { o.alsoResize = o.alsoResizeReverse[0];    _store(o.alsoResizeReverse); }
                else { $.each(o.alsoResizeReverse, function(exp, c) { _store(exp); }); }
            }else{
                _store(o.alsoResizeReverse);
            }
        },

        resize: function(event, ui){
            var self = $(this).data("resizable"), o = self.options, os = self.originalSize, op = self.originalPosition;

            var delta = {
                height: (self.size.height - os.height) || 0, width: (self.size.width - os.width) || 0,
                top: (self.position.top - op.top) || 0, left: (self.position.left - op.left) || 0
            },

            _alsoResizeReverse = function(exp, c) {
                $(exp).each(function() {
                    var el = $(this), start = $(this).data("resizable-alsoresize-reverse"), style = {}, css = c && c.length ? c : ['width', 'height', 'top', 'left'];

                    $.each(css || ['width', 'height', 'top', 'left'], function(i, prop) {
                        var sum = (start[prop]||0) - (delta[prop]||0);
                        if (sum && sum >= 0)
                            style[prop] = sum ||...