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="tableProp">
        <div class="trProp">
            <div class="tdPropLeft">AAAAAAAAAAAAAAAAAAAv AAAAAAAA AAAAAAAAAA</div>
            <div class="tdPropRight">B</div>
        </div>


        <div class="trProp">
            <div class="tdPropLeft">AAA AAAAAAAAAA AAAAAAA AAAAAAAAAAAAAAAAA</div>
            <div class="tdPropRight">B knowIt A BOMBAR</div>
        </div>
   <!--     
        <div class="trProp">
            <div class="tdPropLeft">AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA</div>
            <div class="tdPropRight">B</div>
        </div>
   
 -->
</div>

CSS

.tableProp
{
    table-layout: fixed;
    width: 100%;
    display: table;
}

.trProp
{
    display: table-row;
    width: 100%;
}

.tdPropLeft, .tdPropRight
{
    
    overflow: hidden;
    width: 50%;
    display: table-cell;
}

.tdPropLeft
{
    background-color: red;
    white-space: nowrap;
}

.tdPropRight
{
    background-color: blue;
}

JavaScript

//Resizable 2 columns knowIt
$(document).ready(function()
{
    var resize= $(".tdPropLeft");
    var containerWidth = $(".tableProp").width();
    //alert(containerWidth);
    var columnLeftWidth = $(".tdPropLeft").width();
    //alert(columnLeftWidth);
    var columnRightWidth = $(".tdPropRight").width();
 
    $(resize).resizable(
    {
          handles: 'e',
          //maxWidth: columnLeftWidth + columnRightWidth - 20,
          //minWidth: 20,
          resize: function(event, ui)
          {
              var currentWidth = ui.size.width;
              var containerWidth = $(".tableProp").width();
              var percentWidth = ((currentWidth/containerWidth)*100);
              
              if (percentWidth<2)
                  percentWidth=2;
              else if (percentWidth>98)
                  percentWidth=98;
                  
              var percentWidthRight = 100-percentWidth;
              
              
              
              var padding = 2; 

              //$(this).width(currentWidth);
              //$(".tdPropRight").width(containerWidth - currentWidth - padding);
              $(".tdPropRight").css("width", percentWidthRight+"%");
           $(".tdPropLeft").css("width", percentWidth+"%");
          }
    });
});