Resizing a div that has a transform: how to play with the top/left/width properties such that it remains in one place?

I am trying to make my shape stay in place when performing a resize. Unfortunately, the following code:

element.style.left =
        initialPositionsTransformed.originalXPosition -
        Math.abs(distanceX) +
        "px";

element.style.top = initialPositionsTransformed.originalYPosition + "px";

element.style.width = originalElementWidth + Math.abs(distanceX) + "px";

while performing said resize, doesn't work. I can't find a way to make my top value change in such a way that (visually speaking) the shape wouldn't move. If you go to the codesandbox, you can see the movement is weird.

I tried to make it so that the top value is initialPositionsTransformed.originalYposition + distanceX, but this still pushes it.

Is there a formula that would take the resize value from my horizontal resize, use that, and then make it so my shape doesn't move? In other words, I'd like the shape to be anchored to the bottom-right (in this case). The only thing that should increase here is its width, which should shoot up to the top-left.