JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
</div>
<div class="small orange">
</div>
<div class="small green">
</div>

<div class="main">
</div>
<div class="small blue">
</div>
<div class="small purple">
</div>

<div class="main">
</div>
<div class="small red">
</div>

CSS

.main{
    width:65%;
    height:125px;
    margin-bottom:10px;
    float:left;
}
.small{
    width:35%;
    height:25px;
    float:left;
    margin-bottom:5px;
}

@media screen and (max-width: 692px)   {
    .main, .small{
        width:100%;   
        float:none;
    }
    
}

/* colors */
.main{background:#d0d0d0;}
.orange{background:#ecbd00;}
.green{background:#6aec00;}
.blue{background:#00c8ec;}
.purple{background:#c300ec;}
.red{background:#e93a73;}

JavaScript

//
//
// MAKE SCREEN SMALLER TO SEE THE EFFECT <--- --->
// THE PROBLEM IS THAT IN "LARGE" SCREEN THE SIDE BARS DONT STACK UP
//
//