JSFiddle - React, Tailwind, and code Playground

by stvnmntjy

HTML

<div id="cont">
    <div id="green">grow/shrink per yellow</div>
    <div id="blue">don't overlap/resize</div>
    <div id="yellow">resizable (upward)</div>
    <div id="red">don't push</div>
</div>

CSS

#cont {
    height: 400px;
    overflow: hidden;
    position: relative;
    width: 300px;
}
#cont div {
    font-weight: bold;
    height: 100px;
    text-align: center;
}
#green {
    background-color: green;
}
#blue {
    background-color: blue;
    position: relative;
    top: 0px;
}
#yellow {
    background-color: yellow;
    opacity: 0.5;
    position: relative;
    top: 0px;
}
#red {
    background-color: red;
    bottom: 1px;
    position: absolute;
    width: 100%;
}
#green, #blue, #red {
    color: white;
}

JavaScript

var $greenHeight = $('#green').height(),
    minHeight = $('#yellow').height(),
    maxHeight = $('#yellow').height() * 1.5;

$('#yellow').resizable({
    handles: 'n',
    minHeight: minHeight,
    maxHeight: maxHeight,
    resize: function (ev, ui) {
        $('#blue').css(ui.position);        
    },
    stop: function (ev, ui) {
        var diff,
            $yellowHeight;
        $yellowHeight = ui.size.height;
        diff = $yellowHeight - minHeight;
        $('#green').height($greenHeight - diff);
        $('#blue, #yellow').css('top', '0px');        
    }
});