JSFiddle - React, Tailwind, and code Playground

by NunoMira

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.6/jquery-ui.min.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/themes/base/jquery-ui.css">
    <div id="container">
        <div id="left_panel">
            some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
        </div>
        <div id="content" >
            some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
        </div>
        <div class="clear"></div>
    </div>

CSS

.clear{
    clear:both;
}
#container{
    width: 600px; 
}
#left_panel{
    width: 192px;
    height: 100px;    
    float: left; 
    padding: 3px; 
    background-color: #FF0000;
}

#content{
    padding: 3px; 
    width: 394px;
    height: 100px;
    float: left;
    background-color: #9999FF;
}

JavaScript

$(document).ready(function() {

// init
var leftPanel = $("#left_slide_panel");
var resize= $("#left_panel");
var containerWidth = $("#container").width();
    
$(resize).resizable({
      handles: 'e',
      maxWidth: 450,
      minWidth: 120,
      resize: function(event, ui){
          var currentWidth = ui.size.width;
          
          // this accounts for padding in the panels + 
          // borders, you could calculate this using jQuery
          var padding = 12; 
          
          // this accounts for some lag in the ui.size value, if you take this away 
          // you'll get some instable behaviour
          $(this).width(currentWidth);
          
          // set the content panel width
          $("#content").width(containerWidth - currentWidth - padding);            
      }
});


});