Set contents of inline-flex div to bottom

Question

Edit: this question is the victim of overzealous closure. I searched before posting and couldn't find anything that solved my issue. The correct solution, which someone has posted an answer for — baseline, only appears mid-way through a very long answer on the suggested 'duplicate'. Ridiculous moderation as usual.

I have two elements, h2 and p inside a div. I have display set to inline-flex, as I want them both on the same line.

How do I get both elements to appear at the bottom of the div?

Currently, it looks like they are both in the middle:

My code is as follows — as you can see I've tried various things to try and align the elements to the bottom, but these don't work:

<div class="title">
    <h2 style="margin-top: 0px;">Lorem ipsum</h2>
    <p style="position: relative; bottom: 0;">smaller</p>
</div>

.title {
  display: inline-flex;
  vertical-align: bottom;
  align-items: bottom;
  line-height: 100%;
}

Answer 1

this might help

.title {
  display: inline-flex;
}

p,
h2 {
  margin: 0;
  display: flex;
  align-items: end;
}

<div class="title">
    <h2>Lorem ipsum</h2>
    <p>smaller</p>
</div>

---

if you want baseline of text to align

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

<div class="title">
    <h2>Lorem ipsum</h2>
    <p>smaller</p>
</div>

---