JSFiddle - React, Tailwind, and code Playground

HTML

<div class="jd-user">           
  <div class="jd-header" id="44">marisa09 • <span class="close-this"> X </span></div>          
  <div class="jd-body">
    <div> 
      <div class="linha"><span class="me"> Oii </span></div>
      <div class="linha"><span class="me"> teste </span></div>
      <div class="linha"><span class="me"> Olá </span></div>
      <div class="linha"><span class="other"> Oi </span></div>
      <div class="linha"><span class="me"> oii </span></div>
    </div>
   </div>          
<div class="jd-footer"><input id="textareabox" placeholder="escrever...">  </div>       
</div>

CSS

.jd-body {
overflow: scroll;
max-height: 250px;
min-height: 250px;
background: #FFFFFF;
overflow-x: hidden;
}
.jd-body .linha {
  float:left;
  width:100%;
}
.jd-body .linha span {
  display:inline-block;
  padding:4px 8px;
  color: white;
  border-radius: 25px;
}
.jd-body .linha span.me {   
  background:#DB3256;
  float:left;
}
.jd-body .linha span.other {
  background: #337ab7;
  float:right;
}