Vertical align bottom divs with text of different sizes

Question

Within a flex box, how can I vertical-align the bottom edges of text in two different divs with two different font sizes?

Here is a very simple jsfiddle: http://jsfiddle.net/aegh74dr/1/

You'll notice that the two divs within the flex box contain font of different sizes. The align-items attribute is set to flex-end, but the two different divs do not align at the bottom.

Thank you!

Answer 1

You can use:

align-items: baseline;

Using a value like baseline allows the items to be aligned such as their baselines align.


As Mozilla Developers Networks describes align-items: baseline; :

The baselines (leading edge or trailing edge depending on the flex-direction property) of all flex items are aligned with each other. The flex item that occupies the most space, perpendicular to the layout axis, follows the flex-start rule. The baselines of all remaining elements are then aligned with the baseline of this element.

DEMO http://jsfiddle.net/a_incarnati/aegh74dr/2/