Make chat messages not overlap CSS

Question

I'm testing a chat UI and i've gotten the code in a codepen: https://codepen.io/nikitricky/pen/yLOdmdw But the chat messages overlap. I tried using margin and line breaks but none of them worked. How can i fix this?

Answer 1

Nick M is correct. Also take a look at my CSS edits. I gave each chat bubble a .chat class, and created a declaration block to house all the common style rules.

.chat {
  padding: 10px;
  margin: 10px 0;
  font-size: 18px;
  width: 50%;
  border-radius: 5px;
  clear: both;
}

.chat-else {
  background-color: #f1f1f1;
}

.chat-you {
  background-color: #acfafa;
  text-align: right;
  float: right;
}

.sender {
  background: -webkit-linear-gradient(#005086, #318fb5);
  -webkit-background-clip: text;
  -webkit-text-fill-color: transparent;
  font-weight: bold;
  font-size: 16px;
}

<h2>Chat Messages</h2>

<div class="chat chat-else">
  <span class="sender">Josh</span>
  <p>Hello. How are you today?</p>
</div>

<div class="chat chat-you">
  <p>Hey! I'm fine. Thanks for asking!</p>
</div>

<div class="chat chat-else">
  <span class="sender">Josh</span>
  <p>Sweet! So, what do you wanna do today?</p>
</div>

<div class="chat chat-you">
  <p>Nah, I dunno. Play soccer.. or learn more coding perhaps? Nah, I dunno. Play soccer.. or learn more coding perhaps? Nah, I dunno. Play soccer.. or learn more coding perhaps?</p>
</div>