让聊天消息显示在彼此之下

Question

我正在构建一个聊天窗口，我的UI运行良好。我的css技能虽然没有发展，但我的信息并没有像我希望的那样出现。

我原本希望我的消息会在Facebook或whatsapp聊天中显示：我向右边的消息和其他人在左边的消息以及他们发布的时间。我设法将它们放在右侧和左侧，但不是根据它们发送的时间，如下所示。我自己发布了5条消息，当另一个人发布他的第一条消息时，它最终在左侧而不是低于左侧的其他5条。如何使它们以正确的顺序出现？

CSS文件

body {
    font-family: 'Nunito';
}

h2 {
    font-size: 18px;
    padding: 10px 20px;
    color: #575ed8;
}


#movie-chat{
    width: 100%;
    margin: 30px auto;
    border: 1px solid #ddd;
    box-shadow: 1px 2px 5px rgba(0,0,0,0.05);
    border-radius: 2px;
}

#chat-window{
    height: 400px;
    overflow: auto;
    background: #f9f9f9;
}

.chat-message {
    width: 45%;
    margin-top: 10px;
    margin-left: 5%;
    margin-right: 5%;
    border-radius: 5px;
    word-break: break-all;
}

.rightAligned {
    float: right;
    clear: right;
    margin-right: 5%;
}

.leftAligned {
    float: leftt;
    clear: left;
    margin-left: 5%;
}

#output p{
    padding: 14px 0px;
    margin: 0 20px;
    border-bottom: 1px solid #e9e9e9;
    color: #555;
}

label{
    box-sizing: border-box;
    display: block;
    padding: 10px 20px;
}

#fullName {
    padding: 10px 20px;
}

input {
    padding: 10px 20px;
    box-sizing: border-box;
    background: #eee;
    border: 0;
    display: block;
    width: 100%;
    background: #fff;
    border-bottom: 1px solid #eee;
    font-family: Nunito;
    font-size: 16px;
}

button{
    background: #575ed8;
    color: #fff;
    font-size: 18px;
    border: 0;
    padding: 12px 0;
    width: 100%;
    border-radius: 0 0 2px 2px;
}

Html文件

<div class="col-md-8 col-md-offset-2">
<div id="movie-chat">
    <h2>Movie Chat</h2>
    <div id="chat-window">
    <ul class="list-group">
        <li
            [ngClass]="{
                'leftAligned': !isItMyMsg(message.fullName),
                'rightAligned': isItMyMsg(message.fullName)
            }"
            *ngFor="let message of messages"
            class="list-group-item chat-message"
        >
            <p>{{message.fullName}}</p>
            <p>{{message.message}}</p>
        </li>
    </ul>
    </div>
    <p id="fullName">{{fullName}}</p>
    <input (keyup.enter)="sendMessageToServer(messageInput.value)" id="message" type="text" #messageInput placeholder="Message" />
    <button (click)="sendMessageToServer(messageInput.value)" id="send">Send</button>
</div>
</div>