JSFiddle - React, Tailwind, and code Playground

by Nick Karnik

HTML

<div id=sdcontainer class=sdcontainer></div>
<div id=ld class=ld></div>
<div id=rd class=rd></div>

CSS

.sdcontainer {
    width:50%;
    background-color: red;
    height:100px;
    position: absolute;
}
.ssdcontainerSplitter {
    width:10px;
    background-color: green;
    height:100%;
    position: absolute;
}
#ld {
    background-color: lightblue;
}
#rd {
    background-color: lightgray;
}

JavaScript

var SplitContainer = function (options) {

    options.draggable = options.draggable !== false ? true : false;
    
    var placeholderSplitter = null;
    var container = options.container;
    var clicked = false;

    var splitter = document.createElement("div");
    splitter.id = container.id + "Splitter";
    //splitter.classList.add(container.id + "Splitter");
    splitter.style.left = options.position !== null ? options.position : '50%';
    splitter.style.top = 0;
    splitter.style.bottom = 0;
    splitter.style.position = "absolute";
    splitter.style.backgroundColor = "green";
    splitter.style.width = "10px";
    splitter.style.zIndex = 100;

    var leftDiv = options.leftDiv;
    /*document.createElement("div");
    leftDiv.id = container.id + "Left";
    leftDiv.classList.add(container.id + "Left");
    leftDiv.style.backgroundColor = "blue";
    */

    leftDiv.style.right = '70%';// "calc(" + container.width + " - options.position)";// !== null ? options.position : '50%';
    leftDiv.style.left = 0;
    leftDiv.style.top = 0;
    leftDiv.style.bottom = 0;
    leftDiv.style.position = "absolute";

    var rightDiv = options.rightDiv;
    /*document.createElement("div");    
    rightDiv.id = container.id + "Right";
    rightDiv.classList.add(container.id + "Right");
    */

    rightDiv.style.left = '30%';
    rightDiv.style.right = 0;
    rightDiv.style.bottom = 0;
    rightDiv.style.top = 0;
    rightDiv.style.position = "absolute";

    var render = function () {
        registerEvents();
        container.appendChild(leftDiv);
        container.appendChild(splitter);
        container.appendChild(rightDiv);
    };


    var registerEvents = function () {
        splitter.addEventListener('mouseover', mouseOverHandler);
        splitter.addEventListener('mousedown', mouseDownHandler);
        document.body.addEventListener('mouseup', mouseUpHandler);
        document.body.addEventListener('mousemove', mouseMoveHandler);
       ...