JSFiddle - React, Tailwind, and code Playground

HTML

<div class="grid">
  <span>1</span>
  <span>Apples</span>
  <span>10</span>
  <span>Full</span>
  <span>2</span>
  <span>Butter</span>
  <span>3</span>
  <span>Low</span>
  <span>3</span>
  <span>Charlie</span>
  <span>-</span>
  <span>Unknown</span>
</div>

CSS

.grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  
  border-top: 1px solid;
  border-right: 1px solid;
}

.grid span {
  text-align: center;
  border-left: 1px solid;
  border-bottom: 1px solid;
}