Как можно исправить отображение макета для текстов разной длины?

Question

[Марина]

Пытаюсь исправить отображение блоков в timeline. Как видно по "Уроку 1" и "Уроку 2" , в теге <p class="description"> при указании текста разной длины ломается макет. На малых экранах выглядит нормально, а на больших происходит смещение. При этом в уроках 3 и 4 с использованием их объёма текста выглядит нормально.



Код:


Подскажите пожалуйста, как можно исправить отображение макета для текстов разной длины в <p class="description">?
Заранее благодарю!

Comments

[Ankhena]

Не надо флоаты
Упрощенный пример: https://jsfiddle.net/1neo64za/

[Марина]

Ankhena, Вариант конечно хороший под "description" разной длины. Но, хотелось бы сохранить общий вид с иконками слева и справа, как в моём примере. В Вашем примере, я так и не смогла прикрутить иконки слева и справа. Иконки накладываются на текст.

[Ankhena]

Марина, https://jsfiddle.net/jhf9kxt2/