Creio que o flexbox deveria ser a div .preenchidaAutomaticamente
, e não a .containerConversa2
, porque é na primeira onde serão mostradas as mensagens.
Então, você poderia usar align-self
para alinhar uma classe à esquerda e outra à direita. A da esquerda ficaria com align-self: flex-start;
e a da esquerda comalign-self: flex-end;
. Vou colocar um exemplo abaixo. A estilização (cores, margens etc.) fica por sua conta:
.preenchidaAutomaticamente{
display:flex;
flex-direction:column;
background: yellow;
}
.receptor{
max-width: 50%;
background: blue;
color: white;
align-self: flex-start;
margin: 10px;
}
.transmissor{
max-width: 50%;
background: green;
color: white;
align-self: flex-end;
margin: 10px;
}
<div class="containerConversa2">
<div class="conversa">
<div class="preenchidaAutomaticamente">
<div class="receptor"><strong>Receptor:</strong><br>A propriedade align-items define a propriedade align-self em todos os itens da flex como um grupo. Isto significa que tu podes explicitamente declarar a propriedade align-self para visar um único item. A propriedade align-self aceita todos os valores da align-items , mais o valor auto, que irá dar reset ao valor definido na flex container.</div>
<div class="transmissor"><strong>Transmissor:</strong><br>Até agora observámos o comportamento quando o nosso flex-direction é row, enquanto trabalhamos numa linguagem escrita de cima a baixo. Isto significa que o eixo principal "corre" horizontalmente, e o alinhamento do nosso eixo transversal muda os itens para cima e para baixo.</div>
</div>
</div>
</div>