Оформление в стиле Messenger/SMS ⇐ CSS

[Anonymous]

Я пытаюсь написать базовый HTML-код для отображения вывода в стиле SMS или Messenger.
По какой-то причине у меня возникают проблемы с отображением записей в разных строках с отправленными сообщениями. показано справа и получено слева, с увеличением высоты и ширины для каждого сообщения.
Например, эта версия HTML подходит, за исключением того, что все сообщения отображаются слева. Я понимаю, что элементы div "from" должны быть позиционными: абсолютными, но это приводит к наложению строк, как и следовало ожидать.

Код: Выделить всё

body {
background-color: black;
color: white;
}

div.container {
display: inline-block;
position: absolute;
width: 100%;
font-family: Arial;
}

div.row {
display: inline-block;
position: relative;
left: 0;
width: 100%;
height: auto;
padding: 3px;
}

div.from {
display: inline-block;
position: relative;
right: 0;
max-width: 300px;
background-color: blue;
color: white;
border-radius: 15px;
padding: 10px;
}

div.to {
display: inline-block;
position: relative;
left: 0;
max-width: 300px;
background-color: white;
color: black;
border-radius: 15px;
padding: 10px;
}

Код: Выделить всё

There once was a man from Caracus, who was larking about like a jackass!





Hey!





What's up;





The sky?? :p





Ha ha.





Not much. You?





Yeah not much.

[img]https: //i.stack.imgur.com/dU0ul.png[/img]

Я пробовал играть с типами отображения и позиции, а также с разными элементами (теги абзаца не были для начала).
Я стараюсь избегать использования таблицы.
Могу ли я изменить стиль, чтобы получить чего я хочу, или я лаю не на то дерево?

Подробнее здесь: https://stackoverflow.com/questions/758 ... pe-styling