<!--HTML-->
<div class="html_mess_outside"><div class="html_mess_title">
may, 13. 11:55 a.m. <!-- дата и время -->
</div><div class="html_mess_inside">

<div class="html_mess_left"><div><!-- сообщение слева -->
Так что поначалу Кристиан даже не знал, в какой город он въехал. Он знал только одно: он где-то в Северной Каролине, денег почти не осталось, бензин тоже уже на исходе, и весь день было душно и жарко, и солнце все время грозило выглянуть из-за облаков. В общем, даже не зная названия города, Кристиан решил задержаться здесь на какое-то время.
</div></div>
  
<div class="html_mess_left"><div><!-- сообщение слева -->
Так что поначалу Кристиан.
</div></div>

<div class="html_mess_left"><div><!-- сообщение слева -->
Так что поначалу Кристиан.
</div></div>

<div class="html_mess_left"><div><!-- сообщение слева -->
Так что поначалу Кристиан.
</div></div>
  
<div class="html_mess_right"><div><!-- сообщение справа -->
Так что поначалу Кристиан даже не знал, в какой город он въехал. 
</div></div>

 <div class="html_mess_right"><div><!-- сообщение справа -->
Так что 
</div></div>
 
<div class="html_mess_left"><div><!-- сообщение слева -->
<img src="https://forumstatic.ru/files/001a/19/89/99576.jpg">
</div>
</div>
  
  
</div></div>


<style>@import url('https://fonts.googleapis.com/css2?family=Ubuntu:wght@400;700&display=swap');
@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;700&display=swap');

.html_mess_outside {
  background: #e3e3e3; /* общий цвет фона */
  border: 1px solid #d1d1d1; /* рамка */
  margin: 20px auto;
  width: 550px
}

.html_mess_title {
  background: #476766; /* цвет заголовка */
  color: #d7d7d7; /* цвет текста заголовка */
  font: 700 10px Ubuntu;
  text-align: center;
  padding: 10px 0;
  text-transform: uppercase;
}

.html_mess_inside {
  padding: 10px 0px
}

.html_mess_inside img {
  max-width: 400px;
  border-radius: 10px
}

.html_mess_left {
  margin: 2px 16px;
  width: auto;
   display: flex;
  align-items: flex-start;
  flex-direction: column
}

.html_mess_left > div {
  font: 400 11px inter;
  border-radius: 15px;
  border: 1px solid #d1d1d1; /* цвет сообщения слева */
  background: #d1d1d1; /* рамка */
  padding: 10px;
  max-width: 400px;
  margin: 5px 0;
}


.html_mess_right {
  margin: 2px 16px;
  width: auto;
  display: flex;
  align-items: flex-end;
  flex-direction: column
}

.html_mess_right > div {
  font: 400 11px inter;
  border-radius: 15px;
  border: 1px solid #d1d1d1; /* цвет сообщения справа */
  background: #dcdcdc; /* рамка */
  padding: 10px;
  margin: 5px 0;
  max-width: 400px;
}

.html_clear {
  clear: both
}</style>