JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"></div>
<div id="container2"></div>

CSS

#container {
    position: absolute;
    
    width: 20px;
    
    top: 10px;
    left:10px;
    
    background-color: blue;
}

#container:before {
    content:"";
    display:block;
    padding-top: 100%;
}

#container2 {
    position: absolute;
    
    height: 20px;
    
    top: 40px;
    left:10px;
    
    background-color: blue;
}

#container2:before {
    content:"";
    display:block;
    padding-left: 100%;
}