JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flexy">
  A girl
  <span class="noname">no name</span>
</div>
<br/>
<div class="flexy">
  A girl
  <span class="noname"><span>no name</span></span>
</div>
<br/>
<div class="flexy">
  Jon Snow
  <span> knows </span>
  <span>nothing</span>
</div>

CSS

.flexy {
  display: inline-flex;
}

.noname::before {
    content: ' has ';
}