JSFiddle - React, Tailwind, and code Playground

by KomathiKarunakaran

CSS

#right_panel {
    position: absolute;
    padding-left: 4px;
    height: 50%;
    background-color: #f0f0f0;
     border: 1px solid black;
  width: 270px;
  overflow: auto;
}

#resize {
    background-color: #ccc;
    position: absolute;
    right: 0;
    width: 4px;
    height: 100%;
    cursor: w-resize;
}

JavaScript

var m_pos;
function resize(e){
    var parent = resize_el.parentNode;
    var dx = m_pos - e.y;
    m_pos = e.y;
    parent.style.width = (parseInt(getComputedStyle(parent, '').width) + dy) + "px";
}

var resize_el = document.getElementById("resize");
resize_el.addEventListener("mousedown", function(e){
    m_pos = e.y;
    document.addEventListener("mousemove", resize, false);
}, false);
document.addEventListener("mouseup", function(){
    document.removeEventListener("mousemove", resize, false);
}, false);