JSFiddle - React, Tailwind, and code Playground

by Muhammad Dawood Awan

HTML

<div class="Test">
  <div id="parent">
    <div id="div1"> My Data1 </div>
    <div id="div2"> My Data2</div>
  </div>
</div>

CSS

.Test{
  min-height: 50px;
}

#parent {
  position: absolute;
  height: 100%;
  margin: 0;
  padding: 0;
  width: 100%;
}

#div1 {
  position: relative;
  float: left;
  height: 100%;
  width: 50%;
  background-color: #fff;
}

#div2 {
  position: relative;
  float: left;
  height: 100%;
  width: 50%;
  background-color: #ddd;
}

JavaScript

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

$('#div1').resize(function() {
  $('#div2').width($("#parent").width() - $("#div1").width());
});

$(window).resize(function() {
  $('#div2').width($("#parent").width() - $("#div1").width());
  $('#div1').height($("#parent").height());
});