JSFiddle - React, Tailwind, and code Playground

HTML

<div id="outer" style="width:100%;">  
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> Foo Text </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> </div>
    <div class="inner"> Foo Text </div>
</div>

CSS

div#outer {
    height: 100%;    
    background-color: red;
}

div.inner {
    width: 50%;    
    height: 20px;
    background-color: green;
    margin: 5px auto;
    text-align:center; 
    line-height: 20px;
}