Seeking for a solution to this issue seems futile - every response I find is about a slightly different issue, where all the rows in a single column end up being the same height as the tallest cell in that column. The suggestion is to add grid-auto-rows: 1fr to the grid container. While that works, it is not exactly what I am trying to address.
Let me provide a code snippet to illustrate my point. I aim for the "aaa" cell to match the height of the "BBB" cell, and for the "ccc" cell to match the height of the "DDD" cell, and so on.
.grid-container {
display: grid;
grid-template-columns: 1fr 2fr;
grid-auto-rows: 1fr;
margin: 8px 0;
width: 600px;
gap: 2px;
align-items: center;
}
.grid-item {
border: 1px solid grey;
background-color: #fea;
}
.bigger-text {
font-size: 21px;
line-height: 36px;
}<div class="grid-container">
<div class="grid-item">aaa</div>
<div class="grid-item bigger-text">BBB</div>
<div class="grid-item">ccc</div>
<div class="grid-item bigger-text">DDD</div>
<div class="grid-item">eee</div>
<div class="grid-item bigger-text">FFF</div>
</div>