Space elements visually, but not when selected, with HTML/CSS

Question

I've written a Wordle AI that displays its guesses in the same style as Wordle. (In case you're unfamiliar, each letter has its own colored square.) Sometimes I don't know the definition of a word and want to select it and look it up. Unfortunately, the selected text is separated by spaces.

For simplicity, I've been using flex to map my letters to span elements with display: inline-block, but I'm not attached to flex, so long as the background of each character can be different, the boxes display a gap, and the letters are centered vertically and horizontally within their boxes.

const $ = document.querySelector.bind(document)

const selText = $('#selText')

document.addEventListener('selectionchange', () => 
  selText.textContent = window.getSelection().toString()
)

#container {
  display: flex;
  flex-direction: column;
  width: 300px;
  gap: 2px;
  margin-top: 10px;
}

.row {
  display: flex;
  gap: 2px;
  justify-content: center;
}

.square {
  width: 50px;
  height: 50px;
  display: inline-flex;
  justify-content: center;
  align-items: center;
  font-family: monospace;
  color: white;
  font-size: 40px;
}

.yellow {
  background: gold;
}

.green {
  background: green;
}

.gray {
  background: darkgray;
}

#selText {
  margin-top: 10px;
  font-family: monospace;
}

Select the text below.

<div id="container">
  <div class="row">
    <span class="square yellow">A</span><span class="square green">B</span><span class="square gray">C</span><span class="square yellow">D</span><span class="square green">E</span>
  </div>
  <div class="row">
    <span class="square yellow">A</span><span class="square green">B</span><span class="square gray">C</span><span class="square yellow">D</span><span class="square green">E</span>
  </div>
</div>

<div id="selText"></div>

Is this even possible? I'm also open to some hackery using something like user-select and/or JS. I suppose I could use letter-spacing and background: linear-gradient(/* some dynamic coloring sequence */), but that seems... excessive. CSS is awesome.

Ideas?