JSFiddle - React, Tailwind, and code Playground

HTML

<input id="btnIncrease" type="button" value="increase" /><input id="btnDecrease" type="button" value="decrease" />
<div id="myAspectDiv">    
</div>

CSS

#myAspectDiv {
    width: 3px;
    height: 10px;
    border: 1px solid black;
}

JavaScript

var increase = function() {
    resize(2, 4);
};
var decrease = function() {
    resize(-2, -1);
};
var resize = function(offsetx, offsety) {
    var elmnt = myAspectDiv;
    
    var currentHeight = elmnt.scrollHeight;
    var currentWidth  = elmnt.scrollWidth;
    var newHeight;
    var newWidth;
    var ratio = 1;
    
    if (Math.abs(offsetx) > Math.abs(offsety)) {
        ratio = currentHeight/currentWidth;
        newHeight = currentHeight + (offsetx * ratio);
        newWidth = currentWidth + offsetx;        
    } else {
        ratio = currentWidth/currentHeight;
        newHeight = currentHeight + offsety;
        newWidth = currentWidth + (offsety * ratio);  
    }

    elmnt.style.height = newHeight + "px";
    elmnt.style.width  = newWidth + "px";

    currentY = event.pageY;
    currentX = event.pageX;
};


btnIncrease.addEventListener("click", increase);
btnDecrease.addEventListener("click", decrease);