CSS聊天样式

Question

我想创建一个小聊天。 聊天必须如下所示： 但是Datainformation列出错了...... CSS已经完成，但我不知道如何修复它......

有人可以帮助我吗？

PHP代码：

    <div class="messages messages-img">
    <?php while($fetch_ticket_answer    =       $query_ticket_answer->fetch()) { ?>
        <div class="item in">
            <div class="image">
                <img src="../assets/images/users/user2.jpg">
            </div>
            <div class="text">
                <div class="heading">
                    <b>Test User</b>
                <span class="date"><?php echo htmlentities($fetch_ticket_answer["Time"]); ?></span>
            </div>
            <?php echo htmlentities($fetch_ticket_answer["Message"]); ?>
        </div>
    </div>
    <?php } while($row_ticket_answer2    =   $query_ticket_a_answer->fetch()) { ?>
        <div class="item">
            <div class="image">
                <img src="../assets/images/users/user.jpg">
            </div>                                
            <div class="text">
                <div class="heading">
                    <b>User 2</b>
                    <span class="date"><?php echo htmlentities($row_ticket_answer2["Time"]); ?></span>
                </div>                                    
            <?php echo $row_ticket_answer2["Message"]; ?>
        </div>
    </div> 
    <?php } ?>
</div>