How can I dynamically equalize the heights of card headers that are not direct children of their parent container using CSS or jQuery?

<table class="parent">
  <thead>
    <tr>
      <th class="header">Header 1</th>
      <th class="header">Header 2</th>
      <th class="header">Header 3</th>
    </tr>
  </thead>
  <tbody>
    <tr>
      <td class="item">
        <div class="content">Content for Header 1</div>
      </td>
      <td class="item">
        <div class="content">Content for Header 2</div>
      </td>
      <td class="item">
        <div class="content">Content for Header 3</div>
      </td>
    </tr>
    <tr>
      <td class="item">
        <div class="content">Content for Header 1</div>
      </td>
      <td class="item">
        <div class="content">Content for Header 2, with extra wrapping</div>
      </td>
      <td class="item">
        <div class="content">Content for Header 3</div>
      </td>
    </tr>
  </tbody>
</table>

.parent {
  display: table;
}
.header {
  display: inline-block;
  background-color: cornflowerblue;
}
.item {
  display: table-cell;
  padding: 20px;
}
.content {
  background-color: salmon;
  flex-grow: 1;
}

<div class="row">
  <div class="col item">
    <div class="header">Header 1</div>
    <div class="content">Content for Header 1</div>
  </div>
  <div class="col item">
    <div class="header">Header 2</div>
    <div class="content">Content for Header 2</div>
  </div>
  <div class="col item">
    <div class="header">Header 3</div>
    <div class="content">Content for Header 3</div>
  </div>
</div>

$(function() {
  // Preload header elements
  var $headers = $('.header');

  // Set equal height on all headers
  function setEqualHeight() {
    var maxHeight = 0;
    $headers.each(function() {
      maxHeight = Math.max(maxHeight, $(this).outerHeight());
    });
    $headers.css('height', maxHeight + 'px');
  }

  // Set equal height per row
  function setEqualHeightPerRow() {
    var previousTop = 0;
    var height = 0;
    $headers.each(function() {
      var currentTop = $(this).offset().top;
      if (currentTop > previousTop) {
        $(this).css('height', height + 'px');
        previousTop = currentTop;
        height = 0;
      }
      height = Math.max(height, $(this).outerHeight());
    });
    $(this).css('height', height + 'px');
  }

  // Run on load and resize
  setEqualHeight();
  $(window).resize(setEqualHeight);
});