JSFiddle - React, Tailwind, and code Playground

by borayeris

HTML

<div class="wrap">
    <div class="cell full-width">a</div>
    <div class="cell other">b</div>
    <div class="cell other">c</div>
    <div class="cell full-width">d</div>
</div>

CSS

.wrap {
    display: flex;
    flex-wrap: wrap;
    border: 1px solid black; 
}
.cell {
    flex: 1;
    border: 1px solid red;
    height: 100px;
    text-align: center;
}
.full-width {
    flex: 1 1 100%;
}