CSS Grid - equal height of table-alike grandchild cells in visually synced rows

Question

Is there a way to automatically keep in sync rows height of table-alike structure between headers and body? I mean to force CSS Grid to keep each header and data row to have equal height, despite them having separate parents? I don't want headers and body to share the same column in HTML. I want two main columns: headers and body.

Additionally, number of rows as well as body columns is dynamic. The goal is to create comparison table, where headers represent product features names and body columns represent product features values. Also, table body will additionally be wrapped in <div> to introduce a slider feature.

AFAIK CSS Subgrid theoretically would do that, but it's experimental in Firefox only

Below is simplified input code available also on CodePen. I want "Header 1", "Data 1.1", "Data 2.1" cells to have same height. Same for higher rows, like "Header 2 | higher header 2 | yet higher header 2", "Data 1.2", "Data 2.2" - all cells should have same height.

.table {
  display: grid;
  grid-template-columns: 1fr 2fr;
}

.table__headers,
.table__body {
  border: 1px solid black;
}

.table__body {
  display: grid;
  grid-template-columns: 1fr 1fr;
  
  border: 1px solid blue;
  margin: 5px;
  padding: 5px;
}

.cell {
  border: 1px solid red;
}

<div class="table">
  <div class="table__headers">
    <div class="cell">Header 1</div>
    <div class="cell">
      Header 2
      <br>
      higher header 2
      <br>
      yet higher header 2
    </div>
    <div class="cell">
      Header 3
      <br>
      higher header 3
    </div>
    <div class="cell">Header 4</div>
  </div>
  
  <div class="table__body">
    <div class="table__body-inside">
      <div class="cell">Data 1.1</div>
      <div class="cell">Data 1.2</div>
      <div class="cell">Data 1.3</div>
      <div class="cell">Data 1.4</div>
    </div>
    
    <div class="table__body-inside">
      <div class="cell">Data 2.1</div>
      <div class="cell">Data 2.2</div>
      <div class="cell">Data 2.3</div>
      <div class="cell">Data 2.4</div>
    </div>
  </divc>
</div>

In a concise way: the highest cell in the visual row (because headers and body are technically in separate columns not being same row in the HTML) should dictate the height for the whole row.

Below i attach ugly Paint made picture presenting what i want to achieve:

Answer 1

I made a workaround by manually setting each row's header height (via inline style) to be equal to neighbor row's data height with the help of ResizeObserver (so these heights are dynamically set up when viewport width is changed). To make it work i had to switch from Grid to Flexbox for the headers and data columns, because changing height for Grid children don't make them "take" (or move into) remaining vertical space (they behave like being glued to tracks they are bound to), which happens in Flexbox.

I am aware this is not the best solution, but i haven't came up with anything that worked better.