JSFiddle - React, Tailwind, and code Playground

HTML

<html>
    <body>
        <div class='container'>
            <div class='relative_container' style='background-color:blue;'>
            </div>
        </div>
        <div class='container'>
            <div class='relative_container' style='background-color:red;'>
            </div>
        </div>
    </body>
</html>

CSS

.container
{
    position:relative;
    width:50%;/*half the width of the whole page*/
    margin:auto;/*center the whole thing*/
}
.relative_container
{
    padding-bottom:50%;
    position:relative;
    float:left;
    width:100%;
    height:100%;
}