Как это сверстать?

Question

[Юрий Иванов]

Добрый день, подскажите пожалуйста, не могу в верстку, вроде все легко но не выходит вообще не в какую
https://codesandbox.io/s/unruffled-yonath-pjftqh


надо дату поместить в конце текста

Comments

[Ankhena]

Тут ответ Как разместить строчные элементы в разные края блока?

Answer 1

[Mors Clamor]

date-container {
....
position: relative;
}

date {
postition: absolute;
height: 25px;
right:0;
top: 17.5px;
}

Answer 2

[sewaca]

Верстка это всегда два этапа: разбить на блоки, затем написать стили
Вот разбиение на блоки (как я его вижу):

При написании стилей используйте flexbox'ы и grid'ы (в этом случае можно обойтись только флексами)
Если есть вопрос по какому-то конкретному моменту в стилях (например правый нижний угол сообщения) - пишите в коменты к ответу место по которому вопрос
P.S. и еще, пожалуйста, не используйте для текста div. Для этого больше подходят теги p, span и т.п. Лучше привыкать использовать правильные теги, это сильно поможет в семантической верстке потом

Comments

[Ankhena]

в этом случае можно обойтись только флексами

Покажите, пожалуйста, как вы флексами или гридами поставите текст и дату?

[Ankhena]

А, ну да, на скрине вижу, что всё таки флотами )))

Но рекомендую тогда не писать в ответе, что для решения вопроса (а проблема автора именно в этом моменте) достаточно флексов.

[sewaca]

Ankhena, хорошо, учту
Если проблема правда в этом уголке то да, все решение - float и использование тегов span вместо div

[Ankhena]

sewaca, span ничем не отличается от div с точки зрения семантики. Сомнительная часть того совета.

Да, нужно использовать семантические теги. Но это не span.