左右吹き出しチャット(固定会話表示)

<div class="chat">
          <div class="row them">
            <span class="av">A</span>
            <p class="bub">お疲れ様です、資料を確認しました。</p>
          </div>
          <div class="row me">
            <p class="bub">ありがとうございます、助かります。</p>
          </div>
          <div class="row them">
            <span class="av">A</span>
            <p class="bub">明日の打ち合わせもよろしくお願いします。</p>
          </div>
        </div>

.d10-10-01 .chat{ width:100%; display:flex; flex-direction:column; gap:10px; }
        .d10-10-01 .row{ display:flex; align-items:flex-end; gap:8px; }
        .d10-10-01 .row.me{ justify-content:flex-end; }
        .d10-10-01 .av{ width:26px; height:26px; border-radius:50%; flex:none; background:linear-gradient(135deg,#6366f1,#a855f7); color:#fff; font-size:11px; font-weight:700; display:flex; align-items:center; justify-content:center; }
        .d10-10-01 .bub{ margin:0; max-width:70%; padding:9px 13px; border-radius:14px; font-size:12.5px; line-height:1.5; background:#f1f2f6; color:#333; }
        .d10-10-01 .row.me .bub{ background:#6366f1; color:#fff; border-bottom-right-radius:4px; }
        .d10-10-01 .row.them .bub{ border-bottom-left-radius:4px; }