JSFiddle - React, Tailwind, and code Playground

HTML

<!-- How it is -->
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  <span>, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi</span>
</div>

<!-- How I wish it'd look like, only with the last three spans as one-->
<div>
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit</span>
  <span>, sed do eiusmod tempor incididunt</span>
  <span>ut labore et dolore magna aliqua ut enim ad minim veniam, quis nostrud exercitation</span>
  <span>ullamco laboris nisi</span>
</div>

CSS

div {
  border: 1px solid lightgray;
  width: 600px;
  margin: 10px 0;
}

span {
  background-color: gray;
  border: 1px solid black;
  border-radius: 4px;
  line-height: 1.7em;
  margin: 1px;
  padding: 2px;
}