Исправлена ​​ошибка с первым вертикальным центром Flexbox

Question

Я получил div, который содержит значок FontAwesome и короткий текст.

.box{
  display:flex;
  align-items: center;
  justify-content: center;
}

<div class="box">
  <i>Icon</i>
  <p>Text</p>
</div>

Когда текст достигает определенной длины, он переходит на следующую строку, и значок немного перемещается вверх, что все отцентрировано.

Когда у меня есть более одного из этих .box-элементов, рядом, я хочу, чтобы значки оставались выровненными друг с другом, независимо от того, как долго текст, приведенный ниже, получает .

Answer 1

Я решил это, используя минимальную высоту текста.

Answer 2

.box > i {
    min-height: 30px;
}
.box > p {
    flex: 1;
}