{% for msg in chat_data.messages %}
    <div class="menu chat-item"><img src="{{msg.user_avatar}}" class="chat-avatar" /><div class="chat-message"><a class="{{ 'user-name ' ~ msg.user_css_class }}" href="{{ msg.user_profile_url }}">{{ msg.user_name }}</a>: <span class="chat_message">{{ msg.message }}</span></div><div class="chat-time">{{ msg.message_time|date('H:i') }}</div></div>
{% endfor %}

.chat-item:after {display:block; content:''; clear: both;}
.chat-avatar {width: 40px; height: 40px; border-radius: 50%; float: left;}
.chat-message,.chat-time {margin-left: 40px;}
.chat-time {font-size: smaller; color: gray;}