Javascript 聊天系统对齐

（请参阅底部的更新，了解我想要的内容的实时演示）

我有一个带有聊天系统的在线游戏，但是CSS很烂

图像示例：

和两个代码示例 这里我用的是绝对跟用户的位置，可以和别人说话

.speech容器{
位置：绝对位置；
排名：0；
左：0；
高度：250px；
背景：rgba（0,0,0,15）；
宽度：100%；
}
.演讲{
背景：白色；
边框：1px纯棕色；
填充：10px；
边界半径：5px；
位置：绝对位置；
}

用户1：测试
用户1：测试
用户2：嗨
用户2：嗨
用户2:testtttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttttt
用户2：嗨
User1:testtttttttttttttttttttttttttttttttt（在user2语音之后发音）
用户3：测试

试试这个

.speech容器{
位置：绝对位置；
顶部：40px；
左：0；
高度：250px；
背景：rgba（0,0,0,15）；
宽度：100%；
}
.演讲{
背景：白色；
边框：1px纯棕色；
填充：10px；
边界半径：5px；
显示：块；
宽度：60%；
浮动：左；
}
.蓝色{
浮动：对；
}
1.集装箱剩余{
宽度：300px；
显示：块；
位置：绝对位置；
}
.货柜权{
宽度：300px；
显示：块；
位置：绝对位置；
右：0px；
}

用户1：测试
用户1：测试
用户2：嗨
用户2：嗨
User2:testttt
用户2：嗨
User1:testtttt
用户3：测试

updated post（GIF）嗯，是的，我要做多个响应性冒号，谢谢：）