Shift cells in a row upward while maintaining baseline alignment

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:

1. The inner flexbox aligns the cells with the text to their baseline.
2. 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>