JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
<span>    </span><span class="red">foo</span><span>    </span><span class="blue">bar</span>
</div>
<div class="container">
    <span class="red">foo</span>    <span class="blue">bar</span>
</div>

CSS

.container {
  display: flex;
  white-space: pre;
}

.red {
  color: red;
}

.blue {
  color: blue;
}