JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.jquery.com/ui/jquery-ui-git.js"></script>
<link rel="stylesheet" href="http://code.jquery.com/ui/jquery-ui-git.css">
<div id="resizable"></div>

CSS

#resizable {
    position: fixed;
    top: 5px;
    right: 100px;
    width: 200px;
    height: 100px;
    border: 1px solid;
}

JavaScript

var resizable = $("#resizable").resizable({
    handles: "e, w"
});

var originalRight;

resizable.on("resizestart", function(event, ui) {
    originalRight = parseInt(ui.element.css("right"));
});

resizable.on("resize", function(event, ui) {
    var originalLeft = ui.originalPosition.left;
    var left = ui.position.left;
    var delta = ui.size.width - ui.originalSize.width;
    ui.element.css("left", ""); // reset the left property
    
    if (left === originalLeft) { // moving w edge
        ui.element.css("right", originalRight - delta);
    }
});