JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bluecontainer">
    <div class="ratiocontainer">
        <div class="stretchy-square"></div>
    </div>
</div>

CSS

.bluecontainer {
	width: 200px; /* set width of rectangle */
	margin: 8px auto;
    background: #1AA9C8;
}

.ratiocontainer {
	width: 100px; /* set width & height of red square */
}

.stretchy-square {
	width: 100%;
	padding-bottom: 100%;
	position: relative;
    margin-left: -50%;
}

.stretchy-square:before {
    content: '';
	background: firebrick;
    margin: 15%;
	position: absolute;
	top: 0;
    bottom: 0;
    left: 0;
    right: 0;
    -webkit-transform: rotate(45deg);
    transform: rotate(45deg);
}