JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container">
    <div id="left"></div>
    <div id="splitter"></div>
    <div id="right"></div>
</div>

CSS

#container
{
    position: relative;
}
#left
{
    position: absolute;
    left: 2px;
    top: 2px;
    width: 200px;
    height: 200px;
    outline: 2px solid red;
}
#right
{
    position: absolute;
    left: 202px;
    top: 2px;
    width: 300px;
    height: 200px;
    outline: 2px solid blue;
}
#splitter
{
    position: absolute;
    left:202px;
    top: 2px;
    height: 200px;
    z-index: 2;
    cursor: col-resize;
    width: 8px;
}
#splitter.active
{
    background-color: gray;
}

JavaScript

$("#splitter").on("mousedown", function() {
    $(this).toggleClass("active");
});