JSFiddle - React, Tailwind, and code Playground

HTML

<div id="content">
    <div id="team">
        <div class="cell">Team Adsxfdssfdfdsfsdfdsffvcvbcbbdfrvadsvfdavdafbbadfbfbfdabfdabfdbfdbfdbfdbfdbadbbdvbdfbdfabfdbfd</div>
        <div class="cell">Team B</div>
        <div class="cell">Team C</div>
    </div>
</div>

CSS

#content {
    height: 500px;
    width: 650px;
}
#team {
    border: 1px solid #000;
    height: 80%;
    width: 100%;
}
#team .cell {
    border: 1px solid #f00;    
    float: left;
    height: 40%;    
    margin-left: 3%;
    margin-bottom: 9%;
    width: 19.5%;
}