JSFiddle - React, Tailwind, and code Playground

HTML

<div id="thing" 'onmousemove=resize(t)'></div>

CSS

#thing {
    background-color: chartreuse;
    border: 2px dashed #000;
    height:100px;
    left:100px;
    position: absolute;
    width:100px;
    z-index: 999999;
    bottom:0px
}

JavaScript

// For a non-jsfiddle document, you may have to put this line in an onload handler.
document.onmousemove = resizeH;

var t, left, mousey;

// object to be resized
t = $('thing');
// object offset left
left = t.offsetLeft;

// horizontal resize function
function resizeH(e) {
    // get x coord of mouse
    e ? mousey = e.pageY : mousey = window.event.clientY;
    
    // report mousex as a sanity check
    t.innerHTML = mousey-left;
    
    // resize width to right if req'd
    if(mousey-left > 0) { 
       t.style.height = mousey - left + 'px';
    } 
    // otherwise, move left side and increase width simultaneously.
    
}