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 class="containerTeste">
        <div class="left_panelTeste">
            some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
        </div>
        <div class="contentTeste" >
            some text, lorem ipsum. some text, lorem ipsum. some text, lorem ipsum.
        </div>
    </div>

CSS

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

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

JavaScript

//resizable 2 colunas
$(document).ready(function() {

// init
var resize= $(".left_panelTeste");
var containerWidth = $(".containerTeste").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
          $(".contentTeste").width(containerWidth - currentWidth - padding);
      }
});

});