<section class="discussion">
  
  <div class="bubble sender first">Hello</div>
  <div class="bubble sender last">This is a CSS demo of the Messenger chat bubbles, that merge when stacked together.</div>
  
  <div class="bubble recipient first">Oh that's cool!</div>
  <div class="bubble recipient last">Did you use JavaScript to perform that kind of effect?</div>
  
  <div class="bubble sender first">No, that's full CSS3!</div>
  <div class="bubble sender middle">(Take a look to the 'JS' section of this Pen... it's empty! 😃</div>
  <div class="bubble sender last">And it's also really lightweight!</div>
  
  <div class="bubble recipient">Dope!</div>
  
  <div class="bubble sender first">Yeah, but I still didn't succeed to get rid of these stupid .first and .last classes.</div>
  <div class="bubble sender middle">The only solution I see is using JS, or a &lt;div&gt; to group elements together, but I don't want to ...</div>
  <div class="bubble sender last">I think it's more transparent and easier to group .bubble elements in the same parent.</div>
  
</section>

html { font-family: 'PT Sans', Georgia, serif; }

.discussion {
  max-width: 600px;
  margin: 0 auto;
  
  display: flex;
  flex-flow: column wrap;
}

.discussion > .bubble {
  border-radius: 1em;
  padding: 0.25em 0.75em;
  margin: 0.0625em;
  max-width: 50%;
}

.discussion > .bubble.sender {
  align-self: flex-start;
  background-color: cornflowerblue;
  color: #fff;
}
.discussion > .bubble.recipient {
  align-self: flex-end;
  background-color: #efefef;
}

.discussion > .bubble.sender.first { border-bottom-left-radius: 0.1em; }
.discussion > .bubble.sender.last { border-top-left-radius: 0.1em; }
.discussion > .bubble.sender.middle {
  border-bottom-left-radius: 0.1em;
  border-top-left-radius: 0.1em;
}

.discussion > .bubble.recipient.first { border-bottom-right-radius: 0.1em; }
.discussion > .bubble.recipient.last { border-top-right-radius: 0.1em; }
.discussion > .bubble.recipient.middle {
  border-bottom-right-radius: 0.1em;
  border-top-right-radius: 0.1em;
}

/* No JS! */