JSFiddle - React, Tailwind, and code Playground

HTML

<div class="first">

<div class="container1">
    </div>

</div>

<div class="second">

<div class="container2">
    </div>
</div>

CSS

.first
{
   position:absolute;
    top:0;
    bottom:0;
    width:50%;
    background-color:aqua;
    float:left;

}


.second
{
   position:absolute;
    top:0;
    bottom:0;
    width:50%;
    right:0;
    background-color:#376D99;     
}

.container1
{
    height:80%;
    width:80%;
    background-color:red;
    margin:0 auto;
    margin-top:10%;
}

.container2
{
    height:80%;
    width:80%;
    background-color:red;
    margin:0 auto;
    margin-top:10%;   
    
}