JSFiddle - React, Tailwind, and code Playground

HTML

<div class="background">
  <div class="sup">
    <span class="s s1">Starttext</span>
    <span class="s s2">A text which can break because it is long.</span>
    <span class="s s3">Endtext</span>
  </div>
</div>
<br/>
<div class="background">
  <div class="sup">
    <span class="s s1">Starttext</span>
    <span class="s s2">A text which can break<br/> because it is long.</span>
    <span class="s s3">Endtext</span>
  </div>
</div>

CSS

.background {
  width: 300px;
  background: #000;
}

.sup {
  display: table;
}

.s {
  display: table-cell;
}

.s1 {
  background: #f0f;
}

.s2 {
  background: #ff0;
}

.s3 {
  background: #0ff;
}