JSFiddle - React, Tailwind, and code Playground

HTML

<div id="left-panel"></div>

<div id="drag-bar"></div>

<div id="right-panel"></div>

CSS

html, body { width: 100%; height: 100%; }

#left-panel { width: 100px; height: 100%; float: left; background: red; }

#drag-bar { width: 5px; height: 100%; float: left; background: blue; cursor: col-resize; }

#right-panel { width: 100%; height: 100%; margin-left: 105px; background: green; }

JavaScript

$('#drag-bar').on('mousedown',function(e){
   
    var x = e.pageX;
    $('#left-panel').css({'width': x+'px'});
    $('#right-panel').css({'margin-left': (x+5)+'px'});
    
});