Float right and float left on different lines

Question

I want to have an element floated left, followed by an element floated right, with both on separate lines. It's supposed to be a chat client where the text is displayed on the bottom of the messages div. For some reason, the sent and received messages end up on the same line.

Here is the 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>

And the css

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

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

.sent-message{
  float: right;
}

.received-message {
  float: left;
}

And the jsfiddle. https://jsfiddle.net/5pdad3tx/

Answer 1

add this to your css.!

.message-row{
    clear:both;
}

Working FIDDLE