[html]<section class="chat-wrapper">
<div class="soc-avatars">
<!----- ссылка на профиль, аватар и ник --->
<a href="#ссылка_на_профиль"><img src="https://upforme.ru/uploads/001c/69/a5/4/23792.png" alt="avatar" /> <span data-title='online'>@nickname</span></a>
</div>

<div class='chwrap'><div class="soc-chat-wrapper">
<!----- левое сообщение, дата в data-msgtime --->
<p class="left-msg" data-msgtime="05 august, 15:23">
<img src='https://upforme.ru/uploads/001c/a2/2d/2/724625.png' class='msg-av'>
lorem ipsum.
</p>
<p class="left-msg" data-msgtime="05 august, 15:23">
<img src='https://upforme.ru/uploads/001c/a2/2d/2/724625.png' class='msg-av'>
<img src="https://upforme.ru/uploads/001c/69/a5/4/840172.png"  />
</p>
<!----- левое сообщение, дата в data-msgtime --->
<p class="left-msg left-voice" data-msgtime="05 august, 14:43 pm">
<img src='https://upforme.ru/uploads/001c/a2/2d/2/724625.png' class='msg-av'>
<img src="https://upforme.ru/uploads/001c/69/a5/4/840172.png"  /> in vulputate condimentum bibendum. nulla vehicula vel nisi et vehicula. cras ut tellus ut felis gravida ullamcorper. nulla quis quam nec arcu consequat mollis. phasellus finibus odio non tellus molestie dapibus.
</p>

<!----- левое войсовое сообщение, дата в data-msgtime --->
<p class="left-msg left-voice" data-msgtime="05 august, 14:43 pm">
<img src='https://upforme.ru/uploads/001c/a2/2d/2/724625.png' class='msg-av'>
<img src="https://forumstatic.ru/files/001c/a6/e3/91423.png" alt="voice message" /> просто вот рядом с картинкой войсового приписать его расшифровку.
</p>

</div><div class="write-msg"></div></div>

</section>[/html]