JSFiddle - React, Tailwind, and code Playground

HTML

<table id="table1">
 <thead>
 <th id="top1" class="set1" style="width:$(#content1).width()">Sorts 1</th>
 <th id="top2" class="set2">Sorts 2</th>
 <th id="top3" class="set3">Sorts 3</th>
 <th id="top4" class="set4">Sorts 4</th>
 </thead>
</table>
<br> <!-- To demonstrate that they are separate -->
<table id="table2">
 <tr>
 <td id="bottom1" class="set1">Sort 1</td>
 <td id="bottom2" class="set2">Sort 2 With Longer Content</td>
 <td id="bottom3" class="set3">Sort 3</td>
 <td id="bottom4" class="set4">Sort 4</td>
 </tr>
 <tr>
 <td id="bottom1" class="set1">Sort 1</td>
 <td id="bottom2" class="set2">Sort 2</td>
 <td id="bottom3" class="set3">Sort 3 With Longer Content</td>
 <td id="bottom4" class="set4">Sort 4</td>
 </tr>
</table>

CSS

table, th, td {
  border: 1px solid black;
}

table{
  white-space:nowrap;
}

.set1 {
  width: 20%
}

.set2 {
  width: 20%
}

.set3 {
  width: 20%
}

.set4 {
  width: 20%
}

JavaScript

$('#top2').css({"width":$("#bottom2").width()});
$('#top3').css({"width":$("#bottom3").width()});
$('#top4').css({"width":$("#bottom4").width()});