css потрясающий значок выровнен по двум текстовым строкам внутри кнопки ReactJS

Question

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

Вот желание рендеринга

{icon} Это Первое предложение Это второе предложение

Однако я получил это Это второе предложение {icon} Это предложение предложение

Мой код JSX

<Button className{myStyle.iconButton}>
  <i className="fa fa-user"/>
  <p className={myStyle.iconText}>
    {"This is the first sentence"}<br/>
    {"This is the second sentence"}
  </p>
</Button>

.CSS

.iconButton
  text-align: left

.iconText
  display: inline-block

Любой помощь очень ценится. Спасибо

Answer 1

Попробуйте сделать класс iconButton гибкой коробкой

.iconButton{
display: flex;
align-items: baseline;
}