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;
  width:100%;
  display:flex;
}
#div1{
  position:relative;
  height:100%;
  background-color:#A2A;
  width:50%;
}
#div2{
  position:relative;
  height:100%;
  background-color:#BBB;
  width:50%;
  flex: 1;
}
.ui-resizable-e {
  cursor: e-resize;
  width: 7px;
  right: -5px;
  top: 0;
  height: 100%;
  background: black;
}

JavaScript

$("#div1").resizable({
  resize: function( event, ui ) {
		$('.div1').val(ui.size.width);
		$('.div2').val($('#div2').width());
  }
});