SOURCE

<div class="chat">
  <div class="chat-item ">
    <div class="chat-item-img">
    </div>
    <div class="chat-item-content">
      hello world hello world  
      sdsfds
      sdfsdf
      sdfsd
      2342324
    </div>
  </div>
  <div class="chat-item2 ">
    <div class="chat-item-img2">
    </div>
    <div class="chat-item-content2">
      hello world
    </div>
  </div>
</div>

.chat {
  padding: 5px;
  border: 1px dashed #444;
  width: 300px;
  height: 500px;
}

.chat-item {
  margin-top: 10px;
  width: 300px;
  line-height: 40px;
  color: white;
}

.chat-item-img {
  float: left;
  height: 40px;
  width: 40px;
  background-color: red;
}

.chat-item-content {
  margin-left: 5px;
  padding: 0 10px;
  background: #f18c16;
  border-radius: 10px;
  width: 230px;
  float: left;
  position: relative;
}

.chat-item2 {
  margin-top: 10px;
  width: 300px;
  line-height: 40px;
  color: white;
}

.chat-item-img2 {
  float: right;
  height: 40px;
  width: 40px;
  background-color: green;
}

.chat-item-content2 {
  margin-right: 5px;
  padding: 0 10px;
  background: #1c90f3;
  border-radius: 10px;
  width: 230px;
  float: right;
    position: relative;
    top: 10px;
}