JSFiddle - React, Tailwind, and code Playground
HTML
<link rel="stylesheet" href="http://jqueryui.com/themes/base/jquery.ui.all.css">
<div id="container">
<div id="element1" class="resize"></div>
<div id="element2" class="resize"></div>
<div id="element1" class="resize"></div>
<div id="element2" class="resize"></div>
<div id="element3" class="resize"></div>
</div>
CSS
#container { width: 400px; height: 350px; padding: 0.5em; float: left; margin: 10px 10px 10px 0;border:1px solid green; }
#element1 { width: 30%; height: 90%; float: left; background: silver;}
#element2 { width: 20%; height: 90%; float: left; background: brown; }
#element3 { width: 20%; height: 90%; float: left; background: silver; }
JavaScript
$(function() {
var currentSize,oldSize,diffsize,elemreSize,elemoldSize = null;
$('.resize').resizable({
containment:'#container',
start: function() {
oldSize = parseFloat($(this).css("width"));
totAdjWidth = $(this).width()
+ ($(this).prev().size() > 0 ? $(this).prev().width() : 0)
+ ($(this).next().size() > 0 ? $(this).next().width() : 0);
},
stop: function() {
currentSize = parseFloat($(this).css("width"));
var nAdjacent = $(this).prev().size() + $(this).next().size();
diffsize = (currentSize - oldSize) / nAdjacent;
if($(this).size() < totAdjWidth){
//elemoldSize = parseFloat($('#element2').css("width"));
$(this).prev().width($(this).prev().width() - diffsize);
$(this).next().width($(this).next().width() - diffsize);
//elemreSize = diffsize + elemoldSize + "px";
//$("#element2").css('width',elemreSize);
$(this).width(totAdjWidth - ($(this).prev().width() + $(this).next().width()));
}
else{
$(this).prev().width(0);
$(this).next().width(0);
$(this).width(totAdjWidth);
}
}
});
});