JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="item">
    <div>
      <p>blue</p>
    </div>
    <p>blue</p>
  </div>
  
  <div class="item">
    <div>
      <p>invisible</p>
    </div>
    <p>blue</p>
  </div>
  
  <div class="item">
    <div>
      <p>invisible</p>
    </div>
    <p>blue</p>
  </div>
  
  <div class="item">
    <div>
      <p>blue</p>
    </div>
    <p>blue</p>
  </div>
  
  <div class="item">
    <div>
      <p>invisible</p>
    </div>
    <p>blue</p>
  </div>
  
  <div class="item">
    <div>
      <p>invisible</p>
    </div>
    <p>blue</p>
  </div>
  
  <div class="item">
    <div>
      <p>blue</p>
    </div>
    <p>blue</p>
  </div>
  
  <div class="item">
    <div>
      <p>invisible</p>
    </div>
    <p>blue</p>
  </div>
  
  <div class="item">
    <div>
      <p>invisible</p>
    </div>
    <p>blue</p>
  </div>
</div>

CSS

body {
  font-family: sans-serif;
  text-align: center;
}


.container {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  max-width: 400px;
}

.item {
  min-width: 80px;
}

/* This fixes it: */

/* 
.item::before {
  display: block;
  content: "";
} */