[html]<!-- sns -->
<link rel="stylesheet" href="https://forumstatic.ru/files/001b/ae/0f/63521.css?v=20">
<div style="display: flex; align-items: flex-start; margin: 20px auto 0">
<div class="hngng-sns hngng-sns-left" style="margin: 0 10px!important">
<img src="https://via.placeholder.com/150" alt="icon" class="
userpic avatar">
<div class="username">username</div>
<div class="main">
<div class="msg"><img src="https://via.placeholder.com/150" alt="icon" class="msg__userpic avatar">
<div class="msg__content">
<div class="msg__text">текст сообщения</div>
<div class="msg__time">0:00 pm</div>
</div>
</div>
<div class="msg"><img src="https://via.placeholder.com/150" alt="icon" class="msg__userpic avatar">
<div class="msg__content">
<div class="msg__picture">
<img src="https://via.placeholder.com/250" alt="picture">
</div>
<div class="msg__time">0:00 pm</div>
</div>
</div>
<div class="msg"><img src="https://via.placeholder.com/150" alt="icon" class="msg__userpic avatar">
<div class="msg__content last-call">
<div class="msg__text">пропущенный звонок</div>
<div class="msg__time">0:00 pm</div>
</div>
</div>
<div class="msg"><img src="https://via.placeholder.com/150" alt="icon" class="msg__userpic avatar">
<div class="msg__content voice">
<div class="msg__text">
<details>
<summary>
показать расшифровку
</summary>
текст голосового
</details>
</div>
<div class="msg__time">0:00 pm</div>
</div>
</div>
</div>
</div>
<div class="hngng-sns hngng-sns-right" style="margin: 0 10px!important">
<img src="https://via.placeholder.com/150" alt="icon" class="
userpic avatar">
<div class="username">username</div>
<div class="main">
<div class="msg"><img src="https://via.placeholder.com/150" alt="icon" class="msg__userpic avatar">
<div class="msg__content">
<div class="msg__text">текст сообщения</div>
<div class="msg__time">0:00 pm</div>
</div>
</div>
<div class="msg"><img src="https://via.placeholder.com/150" alt="icon" class="msg__userpic avatar">
<div class="msg__content">
<div class="msg__picture">
<img src="https://via.placeholder.com/250" alt="picture">
</div>
<div class="msg__time">0:00 pm</div>
</div>
</div>
<div class="msg"><img src="https://via.placeholder.com/150" alt="icon" class="msg__userpic avatar">
<div class="msg__content last-call">
<div class="msg__text">пропущенный звонок</div>
<div class="msg__time">0:00 pm</div>
</div>
</div>
<div class="msg"><img src="https://via.placeholder.com/150" alt="icon" class="msg__userpic avatar">
<div class="msg__content voice">
<div class="msg__text"> <details>
<summary>
показать расшифровку
</summary>
текст голосового
</details></div>
<div class="msg__time">0:00 pm</div>
</div>
</div>
</div>
</div>[/html]