JSFiddle - React, Tailwind, and code Playground

by David McClelland

HTML

<div id="part1" class="dock">part1</div>
<div class="divider"></div>
<div id="part2" class="dock">part 2</div>

CSS

* {
    margin: 0px;
    padding: 0px;
}
div {
    height: 300px;
}
#part1 {
    /*width: 47%;*/
    background-color: red;
}
#part2 {
    right:0;
    /*width: 47%;*/
    background-color: green;
}
#part3 {
    right:0;
    width: 47%;
    background-color: green;
}
.divider {
    width: 6px;
    position:absolute;
    left: 47%;
    background-color: blue;
}
.dock{
  position:absolute;
  display:flex;
}

JavaScript

$(function () {
    var p1 = parseInt($("#part1").width());
    var p2 = parseInt($("#part2").width());

    $(".divider").draggable({
        axis: "x",
        containment: "parent",
        scroll: false,
        drag: function () {
            var a = parseInt($(this).position().left);
            $("#part1").css({width:a});
            $("#part2").css({width:p1 + p2 -a });
        }
    });
});