JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="splitter vertical">
        <div class="leftPane">something soethign</div>
        <div class="handleBar"></div>
        <div class="rightPane"></div>
        <div class="content-overlay"></div>
    </div>
</div>
<button id="test">hide/show</button>

CSS

.container {
    width: 500px;
    height: 300px;
    box-sizing: border-box;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;}
.splitter {
    position: relative;
    width: 100%;
    height: 100%;
    overflow: hidden;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;}
.splitter.vertical .leftPane {
    position: absolute;
    height: 100%;
    top: 0;
    left: 0;
    bottom: 0;
    overflow: hidden;
    background-color: blue;
    margin-right: 5px;
    right: 25%;
    z-index: 1;
}
.splitter.vertical .rightPane {
    position: absolute;
    height: 100%;
    top: 0;
    right: 0;
    bottom: 0;
    overflow: hidden;
    background-color: red;
    left: auto;
    width: 25%;
    z-index: 1;
}
.splitter.vertical .handleBar {
    position: absolute;
    height: 100%;
    top: 0;
    bottom: 0;
    overflow: hidden;
    background-color: green;
    right: 25%;
    width: 5px;
    margin-left: -5px;
    z-index: 1;
    cursor: e-resize;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;}
.splitter.active .handleClone {
    position: absolute;
    top: 0;
    bottom: 0;
    background-color: green;
    width: 5px;
    cursor: e-resize;
    z-index: 3;
-webkit-touch-callout: none;
-webkit-user-select: none;
-khtml-user-select: none;
-moz-user-select: -moz-none;
-ms-user-select: none;
user-select: none;}
.splitter .content-overlay {
    opacity: 0.5;
    position: absolute;
    width: 100%;
    height: 100%;
    top: 0;
    left: 0;
    z-index: 2;
    display: none;
    background-color: black;
}
.splitter.active .content-overlay {
    display: block;
}
.splitter.active {
    -webkit-touch-callout: none;
    -webkit-user-select: none;
    -khtml-user-select:...

JavaScript

$(document).on('mousedown', '.splitter .handleBar', function (e) {
    var _this = $(this);
    var container = $(this).parent();

    container.removeClass("active").addClass("active");
    var handleClone = $("<div/>", {
        class: 'handleClone'
    }).appendTo(container);
    handleClone.css({
        right: container.width() - (e.pageX - container.offset().left)
    });
    
//    container[0].onselectstart = function(e){e.preventDefault();return false;}
    container.on('mousemove', function (e) {
        var rightPos = container.width() - (e.pageX - container.offset().left);
        handleClone.css({
            right: rightPos - 2
        });
    }).on("mouseup mouseleave", function () {
        var rightPos = handleClone.css("right");
        $(this).find(".leftPane:first").css("right", rightPos);
        $(this).find(".handleBar:first").css("right", rightPos);
        $(this).find(".rightPane:first").css("width", rightPos);
        container.removeClass("active");
        handleClone.remove();

        $(this).off("mouseup mouseleave mousemove")
    })
});

$("#test").click(function(){
    ($(".splitter").hasClass("hide-right")) ?   $(".splitter").removeClass("hide-right") : $(".splitter").addClass("hide-right"); 
});