<ul class="messages">
  <li class="msg-wp">
    <blockquote class="msg">
      <p>This is the message text.</p>
    </blockquote>
  </li>
  <li class="msg-wp">
    <blockquote class="msg">
      <p>This is the message text which is longer. This is the message text which is longer. This is the message text which is longer. This is the message text which is longer.</p>
    </blockquote>
  </li>
  <li class="msg-wp">
    <blockquote class="msg owner">
      <p>This is the message text by the owner.</p>
    </blockquote>
  </li>
  <li class="msg-wp">
    <blockquote class="msg">
      <p>This is the message text.</p>
    </blockquote>
  </li>
  <li class="msg-wp">
    <blockquote class="msg owner">
      <p>This is a longer message text by the owner. This is a longer message text by the owner. This is a longer message text by the owner. This is a longer message text by the owner. This is a longer message text by the owner. </p>
    </blockquote>
  </li>
</ul>
<p><a href="https://www.sitepoint.com/community/t/how-to-make-a-div-expand-width-wise-on-right-left-to-max-width/292324?u=sama74">https://www.sitepoint.com/community/t/how-to-make-a-div-expand-width-wise-on-right-left-to-max-width/292324?u=sama74</a></p>

html,
body {
  height: 100%;
  margin: 0;
  padding: 0.2em;
  box-sizing: border-box;
  background: #ddd;
}
.messages {
  border: 1px solid #000;
  border-radius: 1em;
  box-sizing: border-box;
  height: 80%;
  padding: 0.2em;
  overflow: hidden;
  background: #fff;
  list-style: none;
}
.msg-wp {
  overflow: auto; /* clearfix */
  padding: 0.8em;
}
.msg {
  border: 1px solid #000;
  border-radius: 0.6em;
  background: yellow;
  padding: 0.3em;
  margin: 0 ;
  float: left;
  max-width: 65%;
  box-shadow: 5px 5px 5px rgba(0,0,0,0.3);
}
.owner {
  float: right;
  background: cornflowerblue;
}