JSFiddle - React, Tailwind, and code Playground

HTML

Current:<br>
<div class="message-content">
  <span>Lorem ipsumdolor ipsum dolorsit ametipsumdolor ipsum dolor sit amet ipsumdolor ipsum dolor sit amet</span>
</div>
<div class="separator"></div>

Expected result<br>
<div class="message-content" style="width:424px">
  <span>Lorem ipsumdolor ipsum dolorsit ametipsumdolor ipsum dolor sit amet ipsumdolor ipsum dolor sit amet</span>
</div>

<div class="separator"></div>

<div class="message-content">
  <span>One line works fine</span>
</div>

SCSS

.separator {
  margin-top:30px;
}
.message-content {
  max-width: 450px;
  background: green;
  padding: 15px;
  border-radius: 3px;
  display: inline-block;
  
  span {
    background:red;
  }
}