How to align text on the same line in flexbox?

Question

I have aligned two divs side-by-side using Flexbox and I want the text in both the divs to be pushed to the bottom of the divs at equal levels but there seems to be different level of spacing underneath the individual texts.

.wrapper {
  display: flex;
  flex-direction: row;
}

.block1 {
  font-weight: bold;
  font-size: 2em;
  color: red;
  border: 1px solid;
  display: flex;
  align-items: flex-end;
}

.block2 {
  font-size: 1em;
  color: grey;
  border: 1px solid;
  display: flex;
  align-items: flex-end;
}

.block1.hack-fix {
  line-height: 29px; /* HACK */
}

<h2>Current:</h2>
<div class="wrapper">
  <span class="block1">
    23
  </span>
  <span class="block2">
    Quote
  </span>
</div>
<hr/>
<h2>Needed:</h2>
<div class="wrapper">
  <span class="block1 hack-fix">
    23
  </span>
  <span class="block2">
    Quote
  </span>
</div>

Thanks for the help!

Answer 1

What you're looking for is called baseline alignment.

To achieve this in flexbox use align-items: baseline.

Here's a more complete explanation:

• What's the difference between flex-start and baseline?

.wrapper {
  display: flex;
  flex-direction: row;
  align-items: baseline; /* NEW */
}

.block1 {
  font-weight: bold;
  font-size: 2em;
  color: red;
}

.block2 {
  font-size: 1em;
  color: grey;
}

<div class="wrapper">
  <span class="block1">23</span>
  <span class="block2">Quote</span>
</div>