JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div class="resizable">here's a sidebar,<br/>grab the left edge to resize</div>
    <div class="main">here's some text,<br/>aligned to the right,<br/>to show the right edge of the main element.</div>
</div>

CSS

.container {
    width:500px;
    height:500px;
}

.main {
    background-color:#eeeeee;
    height:100%;
    color:#333333;
    margin-right: 50px;
    text-align:right;
}

.resizable {
    float:right;
    height:100%;
    width:100px;
    color:#eeeeee;
    background-color:#333333;
}

.ui-resizable { position: relative;}
.ui-resizable-handle { position: absolute;font-size: 0.1px;z-index: 99999; display: block; }
.ui-resizable-w { cursor: w-resize; width: 7px; left: -5px; top: 0; height: 100%; }

JavaScript

$(function() {
   // $('.resizable').resizable({'handles': 'w'});
  $('.resizable').resizable({
            handles       : 'e,w'
          , resize        : function (event,ui){
                               ui.position.left = ui.originalPosition.left;
                               ui.size.width    = ( ui.size.width
                                                  - ui.originalSize.width )*2
                                                  + ui.originalSize.width;
                            }
     });
});