JSFiddle - React, Tailwind, and code Playground

by Vitaliy

HTML

<div class="chat">
<div class="chat__message">John: hello Vasya</div>
<div class="chat__message">Vasya: привет Джон</div>
<div class="chat__message">John: I can't understand you...</div>
<div class="chat__message">Vasya: Нихера не понял</div>
  <div class="panel-view-maxchars fs10"><span >...</span>
    <span class="imoon imoon-quill" id="charlimitinfo">осталось 100 символов</span>
  </div>
</div>

CSS

.chat{
  width:400px;
  margin:auto;
  background:#f00;
}
.chat__message{
  float:left;
  background:#fff;
  clear:both;
  margin:10px;
  padding:15px;
  border-radius:10px;
  
}
.chat__message:nth-child(even){
  float:right;
}
.panel-view-maxchars{ 
    clear:both;
    text-align:right;
    background: transparent;
    padding: 5px; /* Поля вокруг текста *//
}
.panel-view-maxchars span{
     opacity: 1;
     color: #000;
     
}