JSFiddle - React, Tailwind, and code Playground

HTML

<div class="foo">
    <div class="a"></div>
    <div class="b"></div>
    <div class="c"></div>
</div>

CSS

.foo {
    display: flex;
    flex-wrap: wrap;
}

.a {
    flex: none;
    
    width: 50%;
    height: 100px;
    
    background: green;
}

.b {
    flex: none;
    
    width: 50%;
    height: 200px;
    
    background: blue;
}

.c {
    flex: none;
    
    width: 50%;
    height: 100px;
    
    background: red;
}