JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Not working: CSS Grid: The cells in the rows have different size.</h3>
<div>
  <p>ABC</p>
  <p>A</p>
  <p>ABCDEFGHIJKLMNOP</p>
</div>
<div>
  <p>ABCDEFGHIJKLMNOP</p>
  <p>A</p>
  <p>AB</p>
</div>
<hr>
<br>
<hr>
<h3>What I want: CSS Table: The cells in the rows have same size.</h3>
<table>
  <tr>
    <td>ABC</td>
    <td>A</td>
    <td>ABCDEFGHIJKLMNOP</td>
  </tr>
    <tr>
    <td>ABCDEFGHIJKLMNOP</td>
    <td>A</td>
    <td>AB</td>
  </tr>
</table>

CSS

div {
  display:grid;
  grid-auto-flow: column;
}
p {
  border: 1px solid red;
  margin: 0;
}

table {
  border-collapse: collapse;
}
td {
  border: solid 2px red;
}