Making col-auto the same width between multiple rows

Question

Lets say I have the following rows:

<div class="row">
    <div class="col">Row 1</div>
    <div class="col-auto">Row 2</div>
    <div class="col-auto">Row 3</div>
</div>

<div class="row">
    <div class="col">Row 1</div>
    <div class="col-auto">Row 2 longest one</div>
    <div class="col-auto">Row 3 longest one</div>
</div>

<div class="row">
    <div class="col">Row 1</div>
    <div class="col-auto">Row 2 shorter</div>
    <div class="col-auto">Row 3 shorter</div>
</div>

This produces:

What I am looking to achieve:

What approach could I take to ensure the columns maintain the same widths between these different rows, so that they all become the width of the largest column?

Answer 1

You can try display:table like this:

.container {
  display: table;
}

.container>.row {
  display: table-row;
}

.container>.row>* {
  display: table-cell;
  padding:5px;
  white-space:nowrap;
}
.col {
 width:100%;
}

<div class="container">

  <div class="row">
    <div class="col">Row 1</div>
    <div class="col-auto">Row 2</div>
    <div class="col-auto">Row 3</div>
  </div>

  <div class="row">
    <div class="col">Row 1</div>
    <div class="col-auto">Row 2 longest one</div>
    <div class="col-auto">Row 3 longest one</div>
  </div>

  <div class="row">
    <div class="col">Row 1</div>
    <div class="col-auto">Row 2 shorter</div>
    <div class="col-auto">Row 3 shorter</div>
  </div>
</div>