JSFiddle - React, Tailwind, and code Playground

HTML

<div class="descr">
    When you have a resizable element within a scrolling container which it is contained to, the element will show erratic behavior when the container is scrolled far to the left. Trying the resize it, it will just jump to a much smaller width and if you try to increase the size from there you will hit a limit far before you reach the container's edge.
</div>

<div class="wrap">
    <div class="inner">
        <div class="slidy">scroll to the far right &amp; resize me, i'll jump back</div>
        <div class="slidy two">try to resize me to the right end of my parent, won't work</div>
    </div>
</div>

CSS

body {
    color: white;
    background-color: #333;
    font-family: sans-serif;
}

.descr {
    background-color: black;
    margin: 20px;
    width: 460px;
    padding: 20px;
}

.wrap {
    width: 500px;
    height: 300px;
    border: 1px solid white;
    margin: 20px;
    overflow: scroll;
}

.inner {
    width: 1500px;
    height: 250px;
    background-color: #666;
    position: relative;
    border-left: 4px solid red;
    border-right: 4px solid red;
}

.slidy {
    position: absolute;
    width: 1400px;
    height: 45px;
    background: teal;
    top: 10px;
    left: 0px;
}
.slidy.two {
    top: 75px;
    left: 10px;
    width: 300px;
}

JavaScript

$(function(){

    $('.slidy').resizable({
        containment: 'parent',
        minHeight: 45,
        maxHeight: 45,
        handles: 'e,w'
    });

});