JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<script src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.11.4/themes/smoothness/jquery-ui.css">
<div id="merda" style="width:30px"></div>
<div id="container">
        <div id="left_panel">
            left_panel
        </div>
        <div id="middle_panel" >
            conteregregregre
        </div>
        <div id="right_panel" >
            right_panel
        </div>
        <div class="clear"></div>
    </div>

CSS

.clear
{
    clear:both;
}
#container
{
    width: 100%;
    border: 1px solid blue 
}
#left_panel
{
    height: 100px;    
    float: left; 
    background-color: #FF0000;
}
#middle_panel
{
    height: 100px;
    float: left;
    background-color: #9999FF;
}
#right_panel
{
    height: 100px;    
    float: left;
    background-color: yellow;
    overflow: auto;
}

JavaScript

//Divs resizable
$(function()
{
    var margin = 4;
    var leftWidth = $("#left_panel").outerWidth();
    var rightWidth = $("#right_panel").outerWidth();
    var containerWidth = $("#container").outerWidth();
    
	$("#middle_panel").css('width', (containerWidth-leftWidth-rightWidth-margin));
 
    $("#left_panel").resizable({
          handles: 'e',
          maxWidth: (containerWidth/2)-10,
          minWidth: 50,
          resize: function(event, ui)
          {
                  var leftWidth = $("#left_panel").outerWidth();
                var rightWidth = $("#right_panel").outerWidth();
                var containerWidth = $("#container").outerWidth();

                $("#middle_panel").css('width', (containerWidth-leftWidth-rightWidth-margin));          
          }
    });
    
        $("#middle_panel").resizable({
          handles: 'e',
          //maxWidth: (containerWidth/2)-10,
          minWidth: 50,
          resize: function(event, ui)
          {
              //alert(ui.size.width);
              var leftWidth = $("#left_panel").outerWidth();
              var middleWidth = $("#middle_panel").outerWidth();
              var rightWidth = $("#right_panel").outerWidth();
              var containerWidth = $("#container").outerWidth();

              $("#right_panel").css('width', (containerWidth-leftWidth-middleWidth-margin));          
          }
    });

});