I have a table structure which is made out of distinct blocks which cannot be brought into the same block, such as this - only much larger.

The structure of this ideally needs to stay the same.

<div class="dynamicList">
   <div class="header">
      <div class="item">col1</div>
      <div class="item">col2</div>
   </div>
   <div class="row">
      <div class="item">Learn JavaScript</div>
      <div class="item">test message</div>
   </div>
   <div class="row">
      <div class="item">Build something awesome</div>
      <div class="item">medium message</div>
   </div>
</div>

I want a way to be able to dynamically size the columns in the row to auto fit to the text so that the largest text column width is used for all the others of the same column. On the top is how it looks, at the bottom is how I want it to look.

I was hoping I could get away with just using CSS for this, however I feel I might need some JavaScript too. I am using React, so thought about using useRef hook, but didn't know how well this would perform with a really large table.

What is the best way to calculate this width and then use it across all columns of the same index?

Here is a JS fiddle showing the problem.

https://jsfiddle.net/og8kz3hp/65/