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 whe

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; }

  

    
Lorem
Ipsum
Dolor
  
  

    
Foo bar
  

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.}}