CSS grid: prevent a specific cell with lengthy text from setting the width of its column

Question

In a grid layout with two columns I have several rows with similar content, while the last row has in its first cell a lengthier text.

I use display: inline-grid and grid-template-columns: auto auto for the container to minimize its width without linebreaks/soft wraps for the short texts in the regular columns (min-content won't do). But I do want soft wraps for the text in the last row so it won't be the one which sets the width of the row and container.

.grid-container {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-gap: 3px;
  border: 1px solid darkcyan;
}

.cell1 {
  text-align: right;
  background-color: rgba(0, 0, 0, 0.35);
}

.cell2 {
  text-align: left;
}

.cell1-special {
  grid-column: 1 /span 1;
  align-self: left;
  background-color: rgba(128, 0, 0, 0.35);
}

<div class="grid-container">
  <div class="cell1">total number N=</div>
  <div class="cell2">100 ... 200</div>
  <div class="cell1">repeat number M=</div>
  <div class="cell2">1 or 2</div>
  <div class="cell1">rate r=</div>
  <div class="cell2">0.1-0.2</div>
  <div class="cell1-special">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="cell2"></div>
</div>

or as jsFiddle.

Is it possible, using just css, to prevent the cell in the last row to set the width of its column? I expect the simple answer is no, but I'm thinking that maybe there's a creative solution based on restructuring the grid, adding a subgrid, an empty column, some smart use of css functions, etc.

Since the cell texts are server-generated, I can't have a static measure of the texts, but I can rearrange the data any way I need to. So I don't think a solution based on a fixed size would be acceptable, like grid-template-columns: fit-content(130px) auto;, but at least the snippet below illustrates exactly what I am looking for:

.grid-container {
  display: inline-grid;
  grid-template-columns: fit-content(120px) auto;
  grid-gap: 3px;
  border: 1px solid darkcyan;
}

.cell1 {
  text-align: right;
  background-color: rgba(0, 0, 0, 0.35);
}

.cell2 {
  text-align: left;
}

.cell1-special {
  grid-column: 1 /span 1;
  align-self: left;
  background-color: rgba(128, 0, 0, 0.35);
}

<div class="grid-container">
  <div class="cell1">total number N=</div>
  <div class="cell2">100 ... 200</div>
  <div class="cell1">repeat number M=</div>
  <div class="cell2">1 or 2</div>
  <div class="cell1">rate r=</div>
  <div class="cell2">0.1-0.2</div>
  <div class="cell1-special">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="cell2"></div>
</div>

Answer 1

I suggest using contain:inline-size which means that its contents will be treated as if they were zero width for the purpose of its contribution to the auto grid column sizing.

.grid-container {
  display: inline-grid;
  grid-template-columns: auto auto;
  grid-gap: 3px;
  border: 1px solid darkcyan;
}

.cell1 {
  text-align: right;
  background-color: rgba(0, 0, 0, 0.35);
}

.cell2 {
  text-align: left;
}

.cell1-special {
  grid-column: 1 /span 1;
  align-self: left;
  background-color: rgba(128, 0, 0, 0.35);
  contain: inline-size;
}

<div class="grid-container">
  <div class="cell1">total number N=</div>
  <div class="cell2">100 ... 200</div>
  <div class="cell1">repeat number M=</div>
  <div class="cell2">1 or 2</div>
  <div class="cell1">rate r=</div>
  <div class="cell2">0.1-0.2</div>
  <div class="cell1-special">Lorem ipsum dolor sit amet, consectetur adipiscing elit</div>
  <div class="cell2"></div>
</div>