JSFiddle - React, Tailwind, and code Playground

by Alexander

HTML

<div>
   <div class="wrp-draggable">
     <div class="left"></div>
     <div id="draggable" class="ui-widget-content resizer"></div>
     <div class="right"><span id="inf">50%</span></div>
   </div>
 </div>

CSS

html, body {
  margin: 0;
  padding: 0;
  height: 100%;
}
body > div {
  padding-top: 10%;
}
.wrp-draggable {
  width: 800px;
  height: 500px;
  margin: 0 auto;
  position: relative;
}
.wrp-draggable::after {
  content: '';
  display: block;
  clear: both;
}
.left, .right {
  outline: 1px solid #dadada;
  width: 50%;
  height: 100%;
}
.left {
  background-color: orange;
  float: left;
}
.right {
  background-color: green;
  float: right;
}
.resizer {
  background-color: #ccc;
  width: 4px;
  height: 100%;
  top: 0;
  left: -webkit-calc(50% - 2px);
  left: calc(50% - 2px);
  position: absolute;
  cursor: w-resize;
}
#inf {
  display: block;
  padding: 10px;
  color: #fff;
}

JavaScript

var parentWidth = $('#draggable').parent().width(),
    $left = $('.left'),
    $right = $('.right'),
    $inf = $('#inf');

$( "#draggable" ).draggable({axis: "x"},{containment: "parent"},
                            {
  drag: function(event, ui) {

    var a = ui.position.left / parentWidth * 100 + '%',
        b = parentWidth - (ui.position.left + $(this).width()),
        b = b / parentWidth * 100 + '%',
        c = parseInt(ui.position.left / parentWidth * 100) + '%';

    $left.width(a);
    $right.width(b);
    $inf.text(c);
  }

});