JSFiddle - React, Tailwind, and code Playground

by humanzing

HTML

<section>
    <div class="left"> 
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit.
    </div> 
    <div class="right"> 
        Lorem ipsum dolor sit amet, consectetuer adipiscing elit. 
    </div>
</section>

CSS

body{margin:0;}
section {
    width: 800px;
    display: flex;
}
div.left, div.right {
    outline: solid 1px #ccc;
    overflow: auto;
}
div.left {
    width: 20%;
    resize: both;
}
div.right {
    flex: 1 1 0;
    width:95%;
}

JavaScript

var p = document.querySelector('p'); // element to make resizable

p.addEventListener('click', function init() {
    p.removeEventListener('click', init, false);
    p.className = p.className + ' resizable';
    var resizer = document.createElement('div');
    resizer.className = 'resizer';
    p.appendChild(resizer);
    resizer.addEventListener('mousedown', initDrag, false);
}, false);

var startX, startY, startWidth, startHeight;

function initDrag(e) {
   startX = e.clientX;
   startY = e.clientY;
   startWidth = parseInt(document.defaultView.getComputedStyle(p).width, 10);
   startHeight = parseInt(document.defaultView.getComputedStyle(p).height, 10);
   document.documentElement.addEventListener('mousemove', doDrag, false);
   document.documentElement.addEventListener('mouseup', stopDrag, false);
}

function doDrag(e) {
   p.style.width = (startWidth + e.clientX - startX) + 'px';
   p.style.height = (startHeight + e.clientY - startY) + 'px';
}

function stopDrag(e) {
    document.documentElement.removeEventListener('mousemove', doDrag, false);
    document.documentElement.removeEventListener('mouseup', stopDrag, false);
}