JSFiddle - React, Tailwind, and code Playground

by Ed Bulikyan

HTML

<div class="chat">
    <div class="message me"></div>
    <div class="message me"></div>
    <div class="message"></div>
    <div class="message me"></div>
</div>

CSS

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

.message {
    width: 20%;
    padding: 15px;
    margin-bottom: 15px;
    background-color: red;
    align-self: flex-start;
}

.message.me {
    align-self: flex-end;
    background-color: blue;
}