Расположение элемента относительно высоты следующего элемента

Question

У меня есть следующее html:

<span class="targetIcon"/>${targetInfo}

Здесь класс targetIcon имеет вид:

.targetIcon:before {
    font-family: 'FontAwesome';
    content: "\f56f";
    font-size: 2em;
    float: left;
    margin-right: 10px;
}

Когда значение targetInfo равно: Drag and drop a file or click to browse, это разрешается как:

Однако, когда targetInfo немного длиннее и, таким образом, перемещается на новую строку, это разрешается как:

Второе изображение выше (многострочное) является правильным.

Однако на первом изображении текст не центрируется после значка. Как разместить текст в центре значка?

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

Answer 1

Вы можете достичь этого с помощью Flexbox :

.targetIcon {
  display: flex;
  align-items: center;
}
.targetIcon:before {
    font-family: 'FontAwesome';
    content: "\f56f";
    font-size: 2em;
    float: left;
    margin-right: 10px;
}

<span class="targetIcon">Drag and drop a file or click to browse</span>