Chat Message Bubbles CSS

Two bubble styles, one for messages you sent and one for messages you received, stacked in a scrolling column.

The layout is flexbox. Each message sets its own align-self, and that is what pushes sent messages to the right and received ones to the left. The tail comes from squaring off a single corner instead of adding a pseudo-element triangle, so nothing needs repositioning when text wraps to a second line.

Colors and the 400px container width sit at the top of the CSS. Bubbles cap at 80% of the container, so widening it keeps long messages readable rather than letting them run edge to edge.