Flex wrap in HTML on multiple span elements

Question

For a website I have to display a div with multiple spans inside. Each one contains one character (with a specific colour class). When I use wraps of any kind, they don't recognize the text as whole and wrap on whitespace but rather on single characters (since it is for the computer only one input, that just fits this place)

See image:

It should wrap at "Dieses Maß wird in [WRAP] Zoll angegeben.

.colouredAnswer {
  display: flex;
  flex-wrap: wrap;
}

.green {
  color: #008000;
  white-space: pre-wrap;
  font-size: 1.5em;
  line-height: 1em;
}

<div class="colouredAnswer">
  <span class="yellow-green">D</span>
  <span class="green">i</span>
  <span class="green">e</span>
  <span class="yellow">s</span>
  <span class="yellow-green">e</span>
  <span class="yellow-green">s</span>
  <span class="green"> </span>
  <span class="green">M</span>
  <span class="green">a</span>
  <span class="green">ß</span>
  <span class="green"> </span>
  <span class="green">w</span>
  <span class="green">i</span>
  <span class="green">r</span>
  <span class="yellow-green">d</span>
  <span class="green"> </span>
  <span class="green">i</span>
  <span class="yellow-green">n</span>
  <span class="green"> </span>
  <span class="green">Z</span>
  <span class="yellow-green">o</span>
  <span class="green">l</span>
  <span class="green">l</span>
  <span class="green"> </span>
  <span class="green">a</span>
  <span class="green">n</span>
  <span class="green">g</span>
  <span class="green">e</span>
  <span class="green">g</span>
  <span class="green">e</span>
  <span class="green">b</span>
  <span class="green">e</span>
  <span class="green">n</span>
  <span class="green">.</span>
</div>

Answer 1

Try wrapping each word in a div:

.colouredAnswer {
  display: flex;
  flex-wrap: wrap;
}

.green {
  color: #008000;
  white-space: pre-wrap;
  font-size: 1.5em;
  line-height: 1em;
}

<div class="colouredAnswer">
  <div>
    <span class="yellow-green">D</span>
    <span class="green">i</span>
    <span class="green">e</span>
    <span class="yellow">s</span>
    <span class="yellow-green">e</span>
    <span class="yellow-green">s</span>
  </div>
  <span class="green"> </span>
  <div>
    <span class="green">M</span>
    <span class="green">a</span>
    <span class="green">ß</span>
  </div>
  <span class="green"> </span>
  <div>
    <span class="green">w</span>
    <span class="green">i</span>
    <span class="green">r</span>
    <span class="yellow-green">d</span></div>
  <span class="green"> </span>
  <div>
    <span class="green">i</span>
    <span class="yellow-green">n</span>
  </div>
  <span class="green"> </span>
  <div>
    <span class="green">Z</span>
    <span class="yellow-green">o</span>
    <span class="green">l</span>
    <span class="green">l</span></div>
  <span class="green"> </span>
  <div>
    <span class="green">a</span>
    <span class="green">n</span>
    <span class="green">g</span>
    <span class="green">e</span>
    <span class="green">g</span>
    <span class="green">e</span>
    <span class="green">b</span>
    <span class="green">e</span>
    <span class="green">n</span>
  </div>
  <span class="green">.</span>
</div>