JSFiddle - React, Tailwind, and code Playground

by je1h

HTML

<body>
    <div id="square"></div>
</body>

CSS

body, html {
    margin: 0;
    height: 100%;
    min-height: 300px;
    position: relative;
}
#square { /* My square. */
    height: 75%; /* It's height depends on ancestor's height. */
    width: 75vh; /* If supported, preliminarily sets it's width. */
    position: absolute; /* Centers it. */
    left: 50%;
    top: 50%;
    transform: translate(-50%, -50%);
    background-color: darkorange; /* Makes it visible. */
}
/* Try to change relults window's height by sliding border underneath. */

JavaScript

/* To make my 'square' square in all circumstances, have to use javascript like this one */
window.onload = window.onresize = function (event) {
    var mySquare = document.getElementById("square");
    mySquare.style.width = mySquare.offsetHeight + 'px';
};