JSFiddle - React, Tailwind, and code Playground

HTML

<div id="header">header <span id="mousestatus"></span>
 <span id="clickevent"></span>

</div>
<div id="sidebar"> <span id="position"></span>

    <div id="dragbar"></div>sidebar</div>
<div id="main">main</div>
<div id="footer">footer</div>

CSS

body, html {
    width:100%;
    height:100%;
    padding:0;
    margin:0;
}
#main {
    background-color: BurlyWood;
    float: right;
    position: absolute;
    top:100px;
    bottom: 38px;
    right: 0;
    left:200px;
}
#sidebar {
    background-color: IndianRed;
    width:200px;
    float: left;
    position: absolute;
    top:100px;
    bottom: 38px;
    overflow-y: hidden;
}
#footer {
    background-color: PaleGoldenRod;
    width:100%;
    height: 38px;
    bottom:0;
    position:absolute;
}
#header {
    background-color: wheat;
    width:100%;
    height: 100px;
}
#dragbar {
    background-color:black;
    height:100%;
    float: right;
    width: 3px;
    cursor: col-resize;
}

JavaScript

var i = 0;

document.getElementById("dragbar").onmousedown = function (e) {

    e.preventDefault();
    document.getElementById("mousestatus").innerHTML = "mousedown" + i++;
    window.onmousemove = function (e) {
        document.getElementById("position").innerHTML = e.pageX + ', ' + e.pageY;
        document.getElementById("sidebar").style.width = e.pageX + 2 + "px";
        document.getElementById("main").style.left = e.pageX + 2 + "px";
    };

    console.log("leaving mouseDown");
};

window.onmouseup = function (e) {
    document.getElementById("clickevent").innerHTML = 'in another mouseUp event' + i++;
    window.onmousemove = null;
};