Как сделать так, чтобы inline элементы не выходили за пределы блока div?

Question

[Drovosek01]

Есть div и в нем img и span. img такой же высоты как и блоки, а текст в span на 2 строки и выходит за границы блока.



Проблема в том, что первая строка span находится внутри блока, а втора - снаружи.
Как спозиционировать span так, чтобы обе строки находились внутри блока и выбли выровнены по середине по вертикали?

Answer 1

[Михаил]

.container {
  display: flex;
  align-items: center;
}

Comments

[Drovosek01]

Нет, нужно чтобы вторая строка тоже отображалась. При этом размеры div менять нельзя ((

[Михаил]

Drovosek01, https://codepen.io/notiv/pen/QWWLoKZ ?

[Михаил]

Drovosek01, Точнее

.container {
  display: flex;
  align-items: center;
}

[Drovosek01]

Михаил, спасибо, это то, что нужно. Замените текст ответа на код из этого комментария и я отмечу его решением.

[Drovosek01]

Михаил, интересно, без flexbox и не меняя структуру html, можно добиться такого же результата?

[Михаил]

Drovosek01,
img
float left