JSFiddle - React, Tailwind, and code Playground

by Aliqs Qid

HTML

<div id="content">
<div id="col1" class="col_left col">
    <div id="res" style="position:static;width:51%;height:32%;background-color:#fff;margin-top:10%;margin-left:20%;border:1px solid blue;">
</div>
</div>
<div id="col2" class="col_center col">
</div>
<div id="col3" class="col_right col" >
</div>
</div>

CSS

*{-moz-box-sizing:border-box;}/*ok*/
body{height:100%;}
#content{width:100%;height:200px;margin-left:50px;}
.col{width:33.33%;height:100%;float:left;}

#col1{background-color:red;}
#col2{background-color:green;}
#col3{background-color:blue;}
#res{padding:5%;}

JavaScript

$("#col2").resizable({ 
		containment: "parent",
		handles:"w,e",
		minHeight:$("#content").height(),
		maxHeight:$("#content").height(),
        minWidth:0.1,
		resize:function(e,ui){
            var current_col =  $(ui.element),
            left_col = current_col.prev(),
            right_col = current_col.next(),
            w_container = current_col.parent().width(),
            w_current_col= ui.size.width,
            w_current_col_percent = parseFloat(((w_current_col*100)/w_container).toFixed(2)),
            w_left_col = left_col.width(),
            w_right_col = right_col.width(),
            w_left_col_percent = parseFloat(((w_left_col*100)/w_container).toFixed(2)),
            w_right_col_percent = parseFloat(((w_right_col*100)/w_container).toFixed(2)),
            handle = (ui.position.left != ui.originalPosition.left)? "w":"e";           
			
			if(handle=="w")
			{	
                var max_w_current_col_percent = parseFloat((100 - w_right_col_percent).toFixed(2)),
                max_w_current_col = (w_container* max_w_current_col_percent)/100,
                adjust_left_col_width = w_container -(w_right_col+w_current_col),
                adjust_left_col_width_percent = parseFloat((100-(w_right_col_percent+w_current_col_percent)).toFixed(2)),
                w_total_col_percent = w_current_col_percent+ adjust_left_col_width_percent+w_right_col_percent;
                
                $(this).resizable("option","maxWidth", max_w_current_col)//different if right_col width move
                              
               // adjust_left_col_width_percent = (adjust_left_col_width_percent < 1 && adjust_left_col_width_percent >= 0)?0: adjust_left_col_width_percent;

                left_col.css({width:adjust_left_col_width_percent+"%"});
				current_col.css({left:0});
                console.log(w_right_col_percent);
                right_col.css({width:w_right_col_percent+"%"});
                
			}else if(handle=="e")
			{
				var ...