Как выровнять inline-элементы по верху?

Question

[dollaween]

Есть 4 inline элемента с разным font-size (но одним шрифтом), со стандартным выравниванием

.item {
  display: inline;
  vertical-align: baseline;
}

При top и text-top происходит что-то странное, не выровнено ни по тексту, ни по блоку текста.

.item {
  vertical-align: top;
}

.item {
  vertical-align: text-top;
}

Вопрос: Как сделать так, чтобы выравнивание было как в baseline, только по верхней границе текста?

Интересует вот такой результат (здесь я подгонял вручную по пикселям):

Comments

[Ankhena]

Задайте родителю флекс и align-items: flex-start

Что происходит с шрифтами, line-height и vertical-align хорошо описано в статье https://css-live.ru/css/metriki-shrifta-line-heigh...

[dollaween]

Ankhena, флекс излишен, когда у нас просто два inline элемента)

А статью читал, но там только теория. Теория понятна, но на практике по ходу инструмента выравнивания по верху, как baseline по низу, нет

[Ankhena]

dollaween, извратится и задать va top, lh < 1 и подобрать сколько именно для конкретного шрифта.

Не могу сказать, чтобы меня радовало написанное.

[Ваня Гурьянов]

Возможно line-height текста.