JSFiddle - React, Tailwind, and code Playground

HTML

<div class="messages">
  <div class="message-list">
    <div class="message-row">
      <span class="sent-message">Hello world</span>
    </div>
    <div class="message-row">
      <span class="received-message">TESTING</span>
    </div>
  </div>
</div>

CSS

.messages {
  height: 500px;
  position: relative;
}

.message-list {
  position: absolute;
  bottom: 0;
  width: 100%;
}

.sent-message{
  float: right;
}

.received-message {
  float: left;
}