Нужно сделать примерно такую форму записи:
┌───────────────────────┐
│┌────┐ │
||Left| │
│└────┘ ┌─────┐|
│ │Right│|
|┌────┐ └─────┘│
│|Left| |
|└────┘ ┌─────┐|
│ │Right│|
|┌────┐ └─────┘│
||Left| |
│└────┘ ┌─────┐|
│ │Right│|
| └─────┘│
└───────────────────────┘
Использую следующий код:
.msg-block {
display: grid;
position: absolute;
bottom: 40;
left: 0;
right: 0;
font: 1.4em Arial sans-serif;
padding-left: 10px;
padding-right: 10px;
grid-template-columns: 50% 50%;
}
.item-left {
grid-column-start: 1;
justify-self: start;
}
.item-right {
grid-column-start: 2;
justify-self: end;
}
<div class="msg-block">
<div class="item-right">Right</div>
<div class="item-left">Left</div>
<div class="item-right">Right</div>
<div class="item-left">Left</div>
<div class="item-right">Right</div>
<div class="item-left">Left</div>
</div>
Однако это работает не так, как нужно.