Как расположить текст по вертикали по центру и по baseline?

Question

[fillpower]

Как сделать так, чтобы иконка и текст отображалась правильно, то есть если текста получается в 1 строку, то он находится по центру относительно иконки. А если текста выходит в 2 строки и более, то иконка находится на одном уровне с текстом.

Вот пример как должно быть с 1 строкой текста: https://codesandbox.io/s/wispy-moon-3ci4w
А тут как правильно должно отображаться с 2 и более строками текста: https://codesandbox.io/s/brave-currying-2c0tf?font...

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

Answer 1

[hzzzzl]

попробуй добавить

.icon {
    margin-bottom: auto;
}

на этих двух примерах работает

Comments

[fillpower]

Офигеть, так было просто. Спасибо.