Align items neatly in grid

I have some div .test with grid-template-columns: auto auto auto; because I want the column width to be like flex effect which depends on the element width, and also justify-content: start; to align the column to the left and this is also why I use auto and not 1fr because I don't want the columns being stretched to the longer width possible.

The problem is that I don't know how to align the column neatly like a table does, s you can see from the example below, the p .target from the second div .test is longer than the first one, what I try to achieve is to make all other column width follow the longest one.

P.S.: I don't want to use table. I also can use JavaScript to find the longest one and set all others' width to this. I just want to see if there is an easy solution with CSS only.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

p {
  margin: 0;
}

.test {
	column-gap: 30px;
	display: grid;
    grid-template-columns: auto auto auto;
    justify-content: start;
}

p:nth-child(2) {
	position: relative;
    width: 120px;
}

.flex {
    white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
    position: absolute;
    left: 0;
    right: 0;
}

<!-- language: lang-html -->

<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>
<div class="test">
	<p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>

<!-- end snippet -->

For example, it looks like this in a table:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

td:nth-child(2) {
	position: relative;
  width: 120px;
}

.flex {
  white-space: nowrap;
	overflow: hidden;
	text-overflow: ellipsis;
  position: absolute;
  left: 0;
  right: 0;
  top: 0;
}

<!-- language: lang-html -->

<table>
<tbody>
  <tr>
    <td>Hello</td>
    <td><span class="flex">Helloooooooooooooo</span></td>
    <td>Hello</td>
  </tr>
  <tr>
    <td>Hellooo</td>
    <td><span class="flex">Helloooooooooooooo</span></td>
    <td>Hello</td>
  </tr>
</tbody>
</table>

<!-- end snippet -->

Note that the all the second columns start together even the first column "hellooo" is longer from the second row.

Refactor your HTML so as to add all items inside a single grid and use inline-grid:

<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
  <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>

.test {
  display: inline-grid;
}

Note that you will have to target the second element of each row with a more complex nth-child:

p:nth-child(3n + 2) {}

Try it:

<!-- begin snippet: js hide: true -->

<!-- language: lang-css -->

.test {
  display: inline-grid;
}

p:nth-child(3n + 2) {
  position: relative;
  width: 120px;
}


/* Demo only */

p {
  margin: 0;
  background: #ddd;
}

.test {
  column-gap: 30px;
  grid-template-columns: auto auto auto;
  justify-content: start;
}

.flex {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  position: absolute;
  left: 0;
  right: 0;
}

<!-- language: lang-html -->

<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
  <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>

<!-- end snippet -->

If you want the grid columns to behave like a table you need to place your items in a single grid container, not 2 separate ones:

<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
  <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>

To set the width of the second element of each row, you can simply specify the width in your grid layout:

grid-template-columns: auto 120px auto;

But if we get rid of the p:nth-child(2) selector now, we'd have the .flex element positioned absolutely against the grid, and not the p element, which messes up the layout.

But you can actually get rid of the absolute positioning altogether without messing up your layout and apply your overflow properties to all the grid items like this:

.test > * {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

And here is the resulting, cleaner code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

p {
  margin: 0;
}

.test {
  column-gap: 30px;
  display: grid;
  grid-template-columns: auto 120px auto;
  justify-content: start;
}

.test > * {
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

<!-- language: lang-html -->

<div class="test">
  <p class="target">Hello</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
  <p class="target">Hellooo</p>
  <p><span class="flex">Helloooooooooooooo</span></p>
  <p>Hello</p>
</div>

<!-- end snippet -->