Як вертикально вирівняти 2 різні розміри тексту?

Я знаю, щоб вертикально вирівняти текст по середині блоку, ви встановили висоту рядка на однакову висоту блоку.

Однак якщо у мене є речення зі словом посередині, тобто 2em. Якщо ціле речення має висоту рядка, однакову з вміщуючим блоком, тоді більший текст вертикально вирівняний, але менший текст знаходиться на тій самій базовій лінії, що і більший текст.

Як я можу встановити його так, щоб обидва розміри тексту були вертикально вирівняні, так що більший текст буде на базовій лінії нижче, ніж менший текст?

Приміряти vertical-align:middle;вбудовані контейнери?

РЕДАГУВАТИ: це працює, але весь ваш текст повинен бути у вбудованому контейнері, наприклад:

    <div style="height:100px; line-height:100px; background:#EEE;">
        <span style="vertical-align:middle;">test</span>
        <span style="font-size:2em; vertical-align:middle;">test</span>
    </div>

Функціональність, яку ви бачите, правильна, оскільки за замовчуванням для "вертикального вирівнювання" є базовим. Здається, ви хочете vertical-align:top. Є й інші варіанти. Дивіться тут на W3Schools .

Редагувати W3Schools не очистило свій вчинок, і все ще, здається, є поганим (у кращому випадку) джерелом інформації. Зараз я використовую sitepoint . Прокрутіть до нижньої частини першої сторінки точки сайту, щоб отримати доступ до їх розділів посилань.

два набори тексту повинні мати однакову фіксовану висоту рядка та набір вертикального вирівнювання

 span{
     vertical-align: bottom;
     line-height: 50px;
}

Однак технічно ви не можете, якщо у вас фіксовані розміри тексту, ви можете використовувати позиціонування (відносне), щоб перемістити більший текст вниз і встановити висоту рядка на менший текст (я припускаю, що цей більший текст позначений як такий так що ви можете використовувати це як селектор CSS)

Ви можете використовувати відсоткові розміри, щоб повторно застосувати батьківські line-height

.big {
  font-size: 200%;
  line-height: 25%;
  display: inline-block;
  vertical-align: middle;
}

Utque aegrum corpus <span class="big">etiam</span> levibus solet offensis 

Простий спосіб - використовувати флекс:

<div>
        abcde
        &nbsp;&nbsp;
        <span>efghai</span>
</div>

<style>
    div {
        padding: 20px;
        background-color: orange;
        display: flex;
        align-items: center; }

    span {
        font-size: 1.5em; }
</style>

Варіант - використовувати таблицю, там тексти різного розміру знаходяться у власних комірках та використовувати вирівнювання: посередині на кожній комірці.

Це не красиво і не працює на всі випадки життя, але воно просте і працює з будь-яким розміром тексту.

Це працює

header > span {
    margin: 0px 12px 0px 12px;
    vertical-align:middle;
}
.responsive-title{
    font-size: 12vmin;
    line-height: 1em;
}
.responsive-subtitle{
    font-size: 6vmin;
    line-height: 2em;
}

<header>
  <span class="responsive-title">Foo</span>
  <span class="responsive-subtitle">Bar</span>
</header>