Как выровнять div как в чате?

Question

Как выровнять div как в чате, входящие сообщения слева, исходящие справа.Проверьте изображение ниже

Answer 1

Вот решение flexbox, с которого можно начать. speaker1 начинается с начала строки, а speaker2 прикрепляется к концу строки. Каждая строка составляет 75% ширины родительского контейнера. Вы можете настроить эту ширину по мере необходимости.

.chat {
  display: flex;
  flex-direction: column;
}

.chat>* {
  width: 75%;
  margin-bottom: 1em;
  border: 1px solid gray;
  padding: 1em;
}

.speaker1 {
  align-self: flex-start;
}

.speaker2 {
  align-self: flex-end;
}

ul,
li {
  margin: 0;
  padding: 0;
  list-style: none;
}

<ul class="chat">
  <li class="speaker1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Reprehenderit pariatur voluptatibus unde illo animi soluta odit minus fugiat. Veniam numquam quam illum praesentium quibusdam impedit, voluptate ratione nesciunt dolores dolorem!</li>
  <li class="speaker2">Lorem ipsum dolor sit amet, consectetur adipisicing elit.</li>
  <li class="speaker2">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Sint excepturi praesentium illum, hic alias, totam porro ipsum esse magni eaque! Labore ullam dolorem quia. Porro autem, corrupti aliquid eligendi repellendus.</li>
  <li class="speaker1">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aliquam ipsum neque molestias eius, obcaecati ab optio nesciunt quibusdam amet est accusantium, sit, libero dolores. Tenetur quibusdam cumque, vitae nisi veniam!</li>
</ul>

jsFiddle