How to link table cells to each other and align the row height to the largest cell?

Question

css

The question is how to apply the height of the cells in a row by the largest cell?
Is there a css solution?

Based on the data array from the back, I dynamically form a table.
I create columns. depending on the quantity specified in advance, and I bind the keys of the object to them.
Each line is an object. The cell is sv-in object.

The header cell has the class table__cell table__cell--head
The body cell includes a wrapper in the form of table__body and a nested div with classes table__cell table__cell--body



Vue 3 (removed imports and definition of components from the example)
Main component:

<template>
  <div class="table">
    <TheTableTouchBar
      v-if="selectedItems.length"
      :touch-bar-list="touchBarList"
      :selected-items="selectedItems"
    />

    <TheTableCheckbox
      :is-checkbox="isCheckbox"
      :cells="cells"
      :selected-items="selectedItems"
      @selected="handlerSelectedItem"
      @selectedAll="handlerSelectedAllItems"
    />

      <div
        class="table__column"
        v-for="column in columns"
        :key="column.value"
      >

        <TheTableHead
          :column="column"
        />
        <TheTableBody
          :keyValue="column.value"
          :cells="cells"
        />

      </div>

  </div>
</template>


<script setup>
const props = defineProps({
  // Setting Content
  columns: {
    type: Array,
    required: true
  },
  cells: {
    type: Array,
    required: true
  },
  touchBarList: {
    type: Array,
    required: false
  },
  isCheckbox: {
    type: Boolean,
    required: false,
    default: true
  },
  isActionOnClickCell: {
    type: Boolean,
    required: false
  }
})

// Let
const selectedItems = ref([])

// Function
const handlerSelectedItem = (cellId) => {
  if (selectedItems.value.includes(cellId)) {
    selectedItems.value = selectedItems.value.filter((id) => id !== cellId)
  } else {
    selectedItems.value.push(cellId)
  }
}
const handlerSelectedAllItems = () => {
  if (selectedItems.value.length !== props.cells.length) {
    props.cells.map((cell) => {
      selectedItems.value.push(cell.id)
    })
  } else {
    selectedItems.value.length = 0
  }
}
</script>

Header Component:

<template>
  <div class="table__cell table__cell--head">
    {{ column.name }}
    <VIcons v-if="column.filter" />
  </div>
</template>

<script setup>
const props = defineProps({
  column: {
    type: Object,
    required: true
  }
})
</script>

Content Component:

<template>
  <div
    class="table__body"
    v-for="(cell, index) in cells"
    :key="cell[keyValue]"
  >
    <div :class="['table__cell table__cell--body',
           index % 2 ? 'table__cell--body-gray' : ''
           ]">
      {{ cell[keyValue] }}
    </div>
  </div>
</template>

<script setup>
const props = defineProps({
  cells: {
    type: Array,
    required: true
  },
  keyValue: {
    type: String,
    required: true
  }
})
</script>