JSFiddle - React, Tailwind, and code Playground

HTML

<div id="parent">
    <div id="child">
        some text  some text  some text  some text  some text
    </div>
</div>

<br /><br /><br />
<a id="btn1" href="javascript:void(0)">Click to rotate</a><br />
<br />

CSS

body {margin:50px}
#parent {position:relative; border:1px solid #000; width:200px; height:100px}
#child {position:absolute; top:0; left:0; background-color:maroon; opacity:0.5; width:150px; height:50px; border:1px solid #000}

JavaScript

$(function(){
        $("#child").draggable();
        var angle = 0;
        $("#btn1").click(function(){
            angle = angle + 90;
            if(angle == 360) { angle = 0 }
            // reset top left position to (0,0)
            $("#child").css({"top": "0px", "left": "0px"});
            var preBounds = getBounds("child");
            $("#child").css({
                "-webkit-transform-origin": "top left",
                "-moz-transform-origin": "top left",
                "-o-transform-origin": "top left",
                "transform-origin": "top left",
                "transform" : "rotate("+ angle +"deg)"
            });
            var currBounds = getBounds("child");
            
            if(angle == 90)
            {
             $("#child").css({ "left": currBounds.left+Number(preBounds.left-currBounds.left)+"px"});
            }
            else if(angle == 180)
            {
             $("#child").css({ "top": currBounds.top+Number(preBounds.top-currBounds.top)+"px","left":currBounds.width+"px"});
            }
            else if(angle == 270)
            {
             $("#child").css({ "top": currBounds.height+"px"});
            }
      });
                         
      
    });
    
    function getBounds(ele){
        var bounds = document.getElementById(ele).getBoundingClientRect();
        console.log(bounds);
        //{left:bounds.left, top:bounds.top,  right:bounds.right, bottom:bounds.bottom}
        return bounds;
    }