JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<div id="parent">
   <div id="div1"> My Data1
     <input type="text" class="div1">
   </div> 
   <div id="div2"> My Data2
     <input type="text" class="div2">
   </div> 
</div>

CSS

#parent{
    position:absolute;
    height:100%;
    margin:0;
    padding:0;
    width:100%;
}
#div1{
    position:relative;
    float:left;
    height:100%;
    width:20%;
    background-color:#A2A;
}
#div2{
    position:relative;
    float:left;
    height:100%;
    width:50%;
    background-color:#BBB;
}
.ui-resizable-e {
    cursor: e-resize;
    width: 7px;
    right: -5px;
    top: 0;
    height: 100%;
    background: black;
}

JavaScript

$("#div1").resizable();

$('#div1').resize(function(e, ui){
console.log(ui.size.width);
});

$(window).resize(function(){
	elementResize()
});

$(document).ready(function(){
	elementResize()
});

function elementResize(){
console.log($('#div2').width())
   $('#div2').width($("#parent").width()-$("#div1").width()); 
   $('#div1').height($("#parent").height()); 
   
       var parentwidth = $("#parent").width(),
           div1width = $("#div1").width(),
           div2width = $("#div2").width(),
        //div1percentage = Math.round((div1width / parentwidth) * 100),
        //div2percentage = Math.round((div2width / parentwidth) * 100);
        div1percentage = Math.ceil((div1width / parentwidth) * 100) + "px",
        div2percentage = Math.ceil((div2width / parentwidth) * 100) + "px";
           
   
   $('.div1').val(div1percentage);
   $('.div2').val(div2percentage);
}