JSFiddle - React, Tailwind, and code Playground

by navinleon

HTML

<div class="holder v1">
    <div class="child">At a glance</div>
    <div class="child">After coverage ends</div>
    <div class="child">Forms & documents</div>
</div>
<div class="holder v2">
    <div class="child">At a glance</div>
    <div class="child">After coverage ends</div>
    <div class="child">At a<br>glance</div>
    <div class="child">Forms & documents</div>

    
    <div class="child">After coverage<br>ends</div>
    <div class="child">Forms &<br>documents</div>
</div>

CSS

.holder {
  display: flex; flex-wrap: wrap;
  justify-content: space-around;
  background: lightgray;
}

.v1 { max-width: 500px }
.v2 { max-width: 320px }
.v3 { max-width: 400px }

.child {
  flex: 0 0; /* modify to see effects */
  border: 1px solid black;
  padding: 30px 0px;
  text-align:center;
}