JSFiddle - React, Tailwind, and code Playground

by Alexey Lisovy

HTML

<p>
    Внешний текст:
    <span class="one">
        strut 1
        <i>Раз</i>
        <i>Два</i>
    </span>

    <span class="two">
        strut 2
        <i><!--Раз<br>-->Два</i>
        <i>Два</i>
        <i>Три</i>
    </span>
</p>

CSS

p { border: 1px solid blue; }
span , i {
        display: inline-block;
}
span 
    {
        border: 1px solid red;
        vertical-align: bottom; /*прижимаем наши инлайн-блоки первого уровня к низу лайн-бокса*/      
    }
.one > i {
    border: 1px solid blue; /*инлайн-блоки второго уровня в первом инлайн-блоке у нас синие*/
    height: 60px;
    vertical-align: top;  /*первый синий инлайн-блок у нас прижат к верху блока*/ 
}
.one > i + i {
    vertical-align: bottom;  /*второй - к низу блока*/
    height: 100px; /* поскольку он самый высокий, блок растянулся под него*/
}
/*При этом базовая линия в нашем первом инлайн-блоке первого уровня располагается где угодно, лишь бы элементы не вылезали за пределы блока. базовая линия текста, отвязана потому, что самый высокий текстовый элемент имеет значение вертикального выравнивания bottom(аналогичный результат был бы, если бы значение vertical-align: top)*/
.two > i {
    border: 1px solid green;   /*инлайн-блоки второго уровня во втором инлайн-блоке у нас зелёные*/
    height: 100px;
    vertical-align: baseline; /*строчки в инлайн-блоках заполняются сверху вниз. Базовая линия инлайн-блока выравнивается по нижней строчке. И уже исходя из этого строится всё остальное. В нашем случае, первый зелёный блок "торчит" вниз, потому что размер его больше намного включённых в него строк, соответственно базовая линия его довольно-таки близко к его верхушки. а куда ему девать оставшуюся часть?*/
}

.two > i + i {
    vertical-align: text-top; /*если присмотреть внимательно то строчка в этом примере находится немного ниже соседей слева, которые лежат на базовой линии... Дело в том, что верх этого нашего второго зелёного инлайн блока должен располагаться по верху области текста его соседей слева, лежащих на базовой линии. Поскольку сверху текста, есть ещё заплечинки, то, как я понимаю, этот элемент располагается ниже, как раз на величину этих заплечинок.
Кстати, поскольку этот элемент ниже всех, то он распирает содержащий его...