Align flex-box items to baseline of last text line in a block

Question

I am trying to achive the last example on the following image, using flex-box.

From what I see, the align-items: baseline; property works great when the blocks only have 1 line.

The property align-items: flex-end; creates some issues mainly because the left and right items have different font-sizes and line-heights. Although the edges of the items are aligned, the white space created by the font size and line-height differences looks really bad when the item has no borders.

I'm trying to find a good all-around solution without any JS.

Thanks in advance.

Answer 1

You can wrap the contents of the flex items inside inline-block wrappers:

.flex {
  display: flex;
  align-items: baseline;
}
.inline-block {
  display: inline-block;
}

.item { border: 1px solid red; }
.item:first-child { font-size: 200%; }
.flex::after { content: ''; position: absolute; left: 0; right: 0; border-top: 1px solid blue; }

<div class="flex">
  <div class="item">
    <div class="inline-block">Lorem<br />Ipsum<br />Dolor</div>
  </div>
  <div class="item">
    <div class="inline-block">Foo bar</div>
  </div>
</div>

That will work because, according to CSS 2.1,

The baseline of an 'inline-block' is the baseline of its last line box in the normal flow, _{^{unless it has either no in-flow line boxes or if its 'overflow' property has a computed value other than 'visible', in which case the baseline is the bottom margin edge.}}

Answer 2

At the time of writing the CSS box model alignment working draft proposes a ‘first’ and ‘last’ value to be added to ‘align-items’. The would allow:

align-items: last baseline

Current it only appears to be supported by Firefox so is one for the future.

https://developer.mozilla.org/en-US/docs/Web/CSS/align-items