Сообщения HTML-чата отказываются разделяться ⇐ CSS

[Anonymous]

Я возился с сообщениями в чате и пытался добавить изображения профиля. Моя текущая система использует только один родительский div и просто текстовый/html-код для сообщений. Что, как я обнаружил, работает, так это использовать div для каждого отдельного сообщения, но это занимает много места, мне приходится писать новый код и все эти плохие вещи. (Я не хочу пробовать что-то новое. Или, может быть, мне лень?)
Вот мой пример кода, который я использовал. Сообщения работают нормально, они все находятся в одной строке.
Вот как мне хотелось бы, чтобы это выглядело (я бы предпочел не использовать div для каждого сообщения): https:// html.cafe/xb82dc5b7





Sobs in "I hate CSS"

.message-container {
display: flex;
margin: 10px auto;
}

.profile-pic {
width: 37px;
height: 37px;
border-radius: 50%;
background-color: #007BFF;
display: flex;
justify-content: center;
align-items: center;
color: white;
font-weight: bold;
margin-right: 10px;
}





O
User 1

Message 1

O
User 2

does not work







Подробнее здесь: https://stackoverflow.com/questions/790 ... o-seperate