Sprechblasen anordnen

Hi Leute, ich bastel grad an nem Chat, und die Nachrichten in diesem Chat sollen als Sprechblasen angezeigt werden. Dabei soll der Aufbau wie folgt sein (hoffe ihr versteht das ein bisschen: bild

Profilbild Datum Nachricht Die beiden Zellen bei Profilbild sollen dann natürlich verbinden sein, und das Nachrichten Feld ist eben die Sprechblase. Auf der anderen Seite soll es dann Spiegelverkehrt sein! und Rechts ausgerichtet. Und genau da scheint das Problem für mich zu sein...Hier erstmal das Css und dann das HTML

Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    <style>
  *{
  margin:0;
  padding:0;
}
#chat{
  width:90%;
  display:flex;
  margin:0 auto;
  flex-direction:column;
}
.nachricht_left,
.nachricht_right{
  display:flex;
  flex-direction:row;
}
.nachricht_left .content_nachricht .date{
justify-content: flex-start;
}
.date {
     font-size: 8pt;
}   
.date span{
  margin-left:20px;
}
.nachricht_left .img{
  display:flex;
  flex-direction:column;
  text-align:center;
  width:90px;
  order:1;
}
#chat .img img{
  width:80%;
  margin:10%;
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX