Как выровнять столбца в разных grid зонах?

Имеется следующий html фрагмент и css к нему. Как сделать так, чтобы клетки с столбцах были в ширину контента их содержащего? Например, сейчас клетка первого столбца headerBody будет уже клетки первого столбца tableBody, и столбец tableHeader съедет относительно столбца tableBody. Как сделать столбец в ширину равную ширине самой широкой в нём клетки, если это разные grid-template-areas? Обрезание контента недопустимо, скролл внутри клетки тоже (скролл всей таблицы возможен)

<div class="container">
  <div class="headerBody">
    <div>Test header column</div>
    <div>Test header column</div>
    <div>Test header column</div>
  </div>
  
  <div class="tableBody">
    <div>Test table body Test table body</div>
    <div>Test table body</div>
    <div>Test table body</div>
  </div>
</div>

.containner {
  display: grid;
  grid-template-areas: 'table-header'
                        'table-body';
}

.headerBody {
  grid-area: 'table-header';
  display: grid;
  grid-template-columns: repeat(300, auto);
}

.tableBody {
  grid-area: 'table-body';
  display: grid;
  grid-template-columns:  repeat(300, auto);
}