メッセージUIの吹き出し。相手は左・自分は右に寄せ、発話者側の下角だけborder-radiusを小さくするモダンな尻尾表現です。
プレビュー枠は右下をドラッグすると高さを変えられます
書き換えるとプレビューに即反映されます。変更はこのページ内だけで、リロードすると元に戻ります。
左右の振り分けは、縦flexコンテナの中で自分の発言にだけ align-self: flex-end を掛ける方式です。吹き出しの「尻尾」は三角形を疑似要素で描く方法もありますが、発話者側の下角だけ border-radius を4pxに絞る方が実装が軽く、モダンなメッセージアプリの見た目になります。アバターは align-items: flex-end で吹き出しの下端に揃えています。
発言の連続（同じ人が続けて話す）では2つ目以降のアバターを省略すると、実際のチャットUIらしくなります。時刻表示はtime要素で添えてください。
チャットの吹き出しUIを作ってください。相手は左・自分は右（align-self: flex-end）に振り分け、尻尾は疑似要素ではなく発話者側の下角のborder-radiusだけ4pxに絞る方式で表現してください。