Вобщем сдел чтобы смс были по разные стороны как в мессенжерах с помощью display flax.

.chat-message-left,
.chat-message-right {
display: flex;
flex-shrink: 0
}

.chat-message-left {
margin-right: auto
}

.chat-message-right {
flex-direction: row-reverse;
margin-left: auto
}

Но теперь проблема, длинный текст не переноситься.
Как сдесь быть?

word-break: break-word

Severus, все так же

Изображение

------
76355_IMG_20210319_212459.jpg (164.2 Kb)
Скачиваний: 131

Попробуй использовать word-wrap: break-word;

В паре с display flex или место него?

Попробуй задать max-width: 200px;

Без изменений

Hryhorii_Ivlev, display: inline-block; ?

Не

Есть у тебя блок сообщений - пусть .messages
В них итерируй блоки с классом .message
Для .message пропиши
display:flex;
flex-direction: row;
Для своих сообщений сделай класс .self, то есть для сообщений от тебя должно быть два класса div class = "message self"
Пропиши в стилях .message.self { justify-content: flex-end: }