How to add a <span> in a middle of a sentence when using a flexbox?

Question

Given a flex container that contains a sentence, I'd like to wrap one of the words with a <span> for some additional styling. Example:

div {
  display: flex;
  border: 1px solid black;
  width: 190px;
  flex-wrap: wrap;
}

span {
  color: red;
}

<div>
  This is <span>not</span> a very long sentence.
</div>

As you can see, the sentence breaks after the <span>.

The desired outcome is:

div {
  display: flex;
  border: 1px solid black;
  width: 190px;
  flex-wrap: wrap;
  white-space: pre;
}

.red {
  color: red;
}

<div>
  <span>This </span>
  <span>is </span>
  <span class="red">not </span>
  <span>a </span>
  <span>very </span>
  <span>long </span>
  <span>sentence.</span>
</div>

How would you solve this?

Answer 1

Try with display: inline-block;

div {
  display: inline-block;
  border: 1px solid black;
  width: 190px;
  flex-wrap: wrap;
}

span {
  color: red;
}

<div>
  This is <span>not</span> a very long sentence.
</div>