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

$(document.body).on('mousedown',function(e){
   
    var x = e.pageX;
    //$('#left-panel').css({'width': x+'px'});
    //$('#right-panel').css({'margin-left': (x+55)+'px'});
    $("#drag-bar").css({'width': Math.max(x -100, 5) +'px'});
    
});