JSFiddle - React, Tailwind, and code Playground

HTML

<div class="table">
    <div class="row">
        <div class="cell">1</div>
        <div class="cell">2</div>
        <div class="cell">3</div>
    </div>
    <div class="row">
        <div class="cell">4</div>
        <div class="cell">5</div>
        <div class="cell">7</div>
    </div>
</div>

CSS

@media screen and (max-width: 600px) {  
   
}


.table {display:table;width:100%;}
.row {display:table-row;}
.cell {display:table-cell;padding:10px;}



.row:nth-child(1) .cell:nth-child(1) {background:#d0d0d0;}
.row:nth-child(1) .cell:nth-child(2) {background:#737373;}
.row:nth-child(1) .cell:nth-child(3) {background:#3b3b3b;}
.row:nth-child(2) .cell:nth-child(1) {background:#ff8400;}
.row:nth-child(2) .cell:nth-child(2) {background:#910000;}
.row:nth-child(2) .cell:nth-child(3) {background:#420000;}