JSFiddle - React, Tailwind, and code Playground

HTML

<!-- In frame 1 (top, non-scrolling): -->
<table id="t1"> 
  <tr> 
    <td>Name</td><td>User Image</td><td>Email</td><td>Favorite Language</td>
  </tr>
</table>

<!-- In frame 2 (bottom, scrolling): -->
<!-- table "t2" intended to have equal column widths -->
<table id="t2">
  <tr>
   <!-- Lots of crazy stuff of wildly varying widths -->
      <td>12345678901234567890A</td>
      <td>123456789012345678901234567890A</td>
      <td>12345678901234567890A</td>
      <td>1234567890A</td>
  </tr>
  <tr>
   <!-- Lots of crazy stuff of wildly varying widths -->
      <td>12345678901234567890A</td>
      <td>1234567890A</td>
      <td>123456789012345678901234567890A</td>
      <td>12345678901234567890A</td>
  </tr>
  <tr>
   <!-- Lots of crazy stuff of wildly varying widths -->
      <td>12345678901234567890A</td>
      <td>1234567890A</td>
      <td>123456789012345678901234567890A</td>
      <td>12345678901234567890A</td>
  </tr>
</table>

JavaScript

$("#t1").width($("#t2").width());
$("#t1 tr td").each(function (i){
       $(this).width($($("#t2 tr:first td")[i]).width());
})