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> 
      <span class="me"> Oii </span>
      <span class="me"> teste </span>
      <span class="me"> Olá </span>
      <span class="other"> Oi </span>
      <span class="me"> oii </span>
    </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 span {
  display:block;
  
  /*-apenas para estilo-*/
  margin-bottom:10px;
  padding:4px 8px;
  color: white;
}
.jd-body  span.me{   
background:#DB3256;
/* float: left; */
border-radius: 25px;
}

.jd-body span.other {
background: #337ab7;
/* float:right; */
border-radius: 25px;
text-align:right;
}