How to make inline text with dangerouslySetInnerHTML

I have a li with a span that contains a text, and below I have some dangerouslySetInnerHTML. Problem, the html data goes below the first span. I want it to stay on the same line.

I also add that if the text is short, it works. If it is long, it goes on line below

Goal : "Informations : my informations"

Current : "Informations :
my informations"

I use TailwindCSS

I tried to use flex flex-wrap on container but still have same problem

How to solve this ?

My code :

<li className='flex flex-wrap'>
     <span className='font-semibold'>Eléments complémentaires :</span>
     <span className='break-words'
           dangerouslySetInnerHTML={{
              __html:"My test HTML without any tags",
           }}
      />
</li>

>Solution :

Everything looks correct, Perhaps you will be getting the spacing issue either on resize of your window (since you have flex-wrap:wrap or your container width is fixed and the text moves to new line.

Check if white-space: nowrap; can be a quick solution in this case.
Set it on break-words class.

.break-words {
   white-space: nowrap;
}