Как реализовать на css?

Question

[Алексей Алексеев]

2 часа уже бьюсь, в css особо не силен.
Как мне реализовать вот такую структуру (выделено красным цветом)?
Пробовал и дивами и списком, все куда-то плывет, не удается собрать картину.
Спасибо!

Comments

[Gene Hagmt]

Слушай, ну если хочешь верстать, начни полноценно изучать CSS. Серьезно. Ты же не будешь все время на тостере спрашивать каждую мелочь...

Answer 1

[aendnn]

Один общий контейнер, внутри 3 дива с содержимым. Контейнеру display: flex, нужную ширину, justify-content: space-between.

Comments

[Алексей Алексеев]

Спасибо!
Основной вопрос, как отделить изображение от многострочного текста?
В частности какую структуру(теги) использовать?

[aendnn]

Не стоит для иконок использовать тег img, можно дать левый отступ тексту, иконку - background-image, и отцентровать ее background-position: left center; либо использовать псевдоэлемент ::before, но лучше первый вариант, кода меньше - результат тот же

[Алексей Алексеев]

aendnn, Да, этот вариант лучше, чем ::before, спасибо!

Answer 2

[profesor08]

Answer 3

[Рома Зварич]

Вот Вам заготовка.
Если есть дополнительные вопросы - пишите

Comments

[Алексей Алексеев]

Спасибо! Подскажите, а как реализовать изображение (иконку) слева от текста? У меня не получается. Вторая строчка текста уходит вниз, под изображение.

[nvdfxx]

Алексей Алексеев, :before/:after

[Рома Зварич]

nvdfxx, обновил CodePen в ответе

[Алексей Алексеев]

Рома Зварич, Спасибо! То что нужно.

Answer 4

[Антон Кузнецов]

Делай ТЗ, заверстаем :)