JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <div class="header">Header one</div>
    <div class="header">Header Two</div>
    
    
    <div class="quarter">Content One </div>
    <div class="quarter">Content Two</div>
    <div class="quarter">Content Three</div>
    <div class="quarter">Content Four</div>
</div>

CSS

#content{
    display:block;
    background-color:grey;
    width:80%;
    height:200px;
    margin:auto;
    font-size:0pt;
}

.header{
    display:inline-block;
    text-align:center;
    font-size:12pt;
    width:48%;
    margin:1%;
    background-color:yellow;
}

.quarter{
    display:inline-block;
    text-align:center;
    font-size:12pt;
    width:23%;
    min-height:40px;
    margin:1%;
    background-color:green;
}