Shift cells in a row upward while maintaining baseline alignment - html

Question

Here is a table built with flexboxes. The cells in the row are aligned with the align-items: baseline property.
.data-row {
display: flex;
align-items: baseline;
border-top: 2px solid blue;
border-bottom: 2px solid blue;
font: bold 14px monospace;
min-height: 75px;
}
.data-row + .data-row {
border-top: none;
}
.data-cell {
padding: 30px 15px 15px;
}
.data-cell--text {
flex-grow: 1;
}
<div class="data-row">
<div class="data-cell">1111111</div>
<div class="data-cell data-cell--text">Usually one line is enough</div>
<div class="data-cell">1111111</div>
<div class="data-cell">1111111</div>
</div>
<div class="data-row">
<div class="data-cell">2222222</div>
<div class="data-cell data-cell--text">But sometimes too long text gets into some cell and goes to the next line</div>
<div class="data-cell">2222222</div>
<div class="data-cell">2222222</div>
</div>
When text in a cell has two lines or more, I would like the contents of all the cells in the row to rise closer to the top of the row, while maintaining their baseline alignment.
Can this be achieved?
The question was suggested by user #Kate B on Russian SO.

Answer 1

You can wrap the cells with data in two nested flexbox-blocks:
The inner flexbox aligns the cells with the text to their baseline.
And the outer flexbox aligns the indoor one with the center axis.
If a new line appears in the text of any cell, then this cell increases the height of the inner block, and it rises inside the outer one.
https://codepen.io/glebkema/pen/XWaZNEP?editors=1100
/* Heart of the matter */
.outer-row {
display: flex;
align-items: center;
}
.inner-row {
display: flex;
align-items: baseline;
flex-grow: 1;
}
/* Appearance */
.outer-row {
border-top: 2px solid blue;
border-bottom: 2px solid blue;
font: bold 14px monospace;
min-height: 72px;
}
.outer-row + .outer-row {
border-top: none;
}
.data-cell {
padding: 0 15px;
}
.data-cell--text {
flex-grow: 1;
}
<div class="outer-row">
<div class="inner-row">
<div class="data-cell">1111111</div>
<div class="data-cell data-cell--text">One line</div>
<div class="data-cell">1111111</div>
<div class="data-cell">1111111</div>
</div>
</div>
<div class="outer-row">
<div class="inner-row">
<div class="data-cell">2222222</div>
<div class="data-cell data-cell--text">Two <br>lines</div>
<div class="data-cell">2222222</div>
<div class="data-cell">2222222</div>
</div>
</div>
<div class="outer-row">
<div class="inner-row">
<div class="data-cell">3333333</div>
<div class="data-cell data-cell--text">And <br>three <br>lines</div>
<div class="data-cell">3333333</div>
<div class="data-cell">3333333</div>
</div>
</div>