JSFiddle - React, Tailwind, and code Playground

by Sahil Kashyap

HTML

<div class="container">
    <div class="top-left">
        TL
    </div>
    <div class="top-right">
        TR
    </div>
    <div class="bottom-left">
        BL
    </div>
    <div class="bottom-right">
        BR
    </div>
</div>

CSS

.container {
        display: flex;
        flex-wrap: wrap;
        background-color:#ccc;
        
  width: 300px;
  height: 200px;
    }
    .top-left {
        flex: 50%; 
    }

    .bottom-left {
        flex: 50%;
    }