JSFiddle - React, Tailwind, and code Playground

by Kevin Neumann

HTML

<div class="screen">
    <div class="rectangle">
        <div class="square">
        </div>
    </div>
</div>

CSS

.screen{
    background: gray;
    width: 100px;
    height: 100px;
}

.rectangle{
    background: blue;
    width: 90%;
    height: 90%;
}

.square{
    background: red;
    width: 30px;
    height: 30px;
}

JavaScript

$(".screen").resizable({});

$(".screen").on("load resize",function(e){
    var rectangle = $(".rectangle");
    var square = $(".square");
    
    var rectWidth = rectangle.width();
    var rectHeight = rectangle.height();
    if(rectWidth < rectHeight){
    	square.width(rectWidth);
        square.height(rectWidth);
    }
    else{
    	square.width(rectHeight);
        square.height(rectHeight);
    }
});