JSFiddle - React, Tailwind, and code Playground

HTML

<div id='div1' style='width:300px; border: 1px solid black; white-space:nowrap; padding-right: 50px;'>
    <label>Test&nbsp;
        <input type='text' style='width:100%;' id='inputBox'/>
    </label>
</div>

JavaScript

$("#div1").resizable({
    handles: "w, sw, ne, nw, se"
});

$(".ui-resizable-e")
.mousedown(function() {
    $(window).mousemove(function() {
        isDragging = true;
        $(window).unbind("mousemove");
        var width = $('#inputBox').width();
        var parentWidth = $("#div1").offsetParent().width();
        var percent = 100*width/parentWidth+50;

        $("#inputBox").css({'width': percent + '%'});

    });
});