Align list items between multiple columns

I have a multiple column layout, each of those columns contains a list:

<div class="row">
  <div class="col">
    <ul>
      <li>..</li>
      <li>..</li>
    </ul>
  </div>
  <div class="col">
    <ul>
      <li>..</li>
      <li>..</li>
    </ul>
  </div>
  ...
</div>

The number of items in each list is the same, however the content of each list item is different (they may include variable content like textarea too). My task is to align list items between columns so that the list item #1 from the first column was on the same line visually with the list items #1 from the other columns, the list item #2 from the first column was on the same line with the list items #2 from the other columns, etc. This 100% resembles the table structure and I do understand I need to use one (or a grid system), however using columns is a must in this project and and cannot change that.

A CSS only solution would be ideal. However, since each list sits in a different container, I doubt there is one. Here is what I tried/thought of so far:

Resizer Solution

1. Create an object that would store the height of each list item in all lists, find the tallest one for each “row”, then set it programmatically to the remaining list items from that row.

2. Set up a ResizeObserver that would listen to changes to each list’s height and repeat the above step.

This solution works, however it’s definitely not ideal because the alignment doesn’t happen immediately, so there is a flash of unaligned list items on page load and whenever list item content changes. Also the more columns and list items I add to the page, the “heavier” it gets.

Content solution

This one is a bit crazy, but looks like a working solution too. The idea is that each list item contains content from all list items from the same “row” stacked upon each other, however has the items it doesn’t need to display hidden (with 0 opacity). Thus, the longest content will push the list item’s height down aligning it with the rest of the list items from the same “row”. Kinda like this:

section {
  display: grid;
  width: 3rem;
  background-color: green;
}

div {
  grid-row-start: 1;
  grid-column-start: 1;
}

div:first-child {
  opacity: 0;
}

<section>
  <div>Lorem ipsum dolot sit amet</div>
  <div>Lorem</div>
</section>

Downsides is that it’s going to be a mess content-wise, also I am going to have issues with content that has id’s and if at one point I’d want to make the width of columns different, this will break everything which I don’t want.

I’d appreciate to see other ideas if you faced similar issues.