JSFiddle - React, Tailwind, and code Playground

HTML

<a href="#" id="both">Toggle size</a>
<div class="test"></div>

CSS

.test{
    position: absolute;
    top: 200px;
    left: 200px;
    
    width: 400px;
    height: 200px;
    background: red;
    
    transform: rotate(45deg);
}

JavaScript

/* jQuery function below */
$(function(){
    
    var css_angle = 45;
   
    var init_w = 300;
    var init_h = 200;
    
    var init_x = 250;
    var init_y = 150;
    
    $('.test').css({
        width : init_w,
        height : init_h,
        left : init_x,
        top : init_y,
        transform : 'rotate(' + css_angle + 'deg)'
    });
    
    var toggle_both = 1;
    $('#both').on('click', function(){
        if(toggle_both)
        {
            var new_width = 310;
            var new_height = 250;
            /* Using the jQuery function */
            $('.test').rotSize(new_width, new_height, css_angle);
        }
        else
        {
            $('.test').css({
                width : init_w,
                height : init_h,
                left : init_x,
                top : init_y,
                transform : 'rotate(' + css_angle + 'deg)'
            });
        }
        toggle_both = !toggle_both;
        return false;
    }); 
    
});


/**
* Resizes rotated set of elements and preserves top-left corner position
* @param {Number} new_width
* @param {Number} new_height
* @param {Number} angle in degrees
* @returns {object} the current jQuery set
*/
$.fn.rotSize = function(new_x, new_y, new_width, new_height, angle){

    //Convert angle from degrees to radians
    var angle = angle * Math.PI / 180

    $(this).each(function(i, elem){
        var $elem = $(elem);
        //initial CSS position.
        var pos = {left: parseInt($elem.css('left')), top: parseInt($elem.css('top'))};
        var init_w = $elem.width();
        var init_h = $elem.height();
        //Get position after rotation with original size
        var x = -init_w/2;
        var y = init_h/2;
        var new_x = y * Math.sin(angle) + x * Math.cos(angle);
        var new_y = y * Math.cos(angle) - x * Math.sin(angle);
        var diff1 = {left: new_x - x, top: new_y - y};

        //Get position after rotation with new size
        var x = -new_width/2;
        var y =...