HTML – Text besides div in a line when spaces added

I have html –

https://jsfiddle.net/nko8p6fr/

It can be seen that , in the text – very long text ; there are 2 spaces.

I want long and text to bring in one line.

First line should contain only one word , rest all words in second line.

Something like this –

How can I achieve it?

<div style='padding:12'>
<div style='background-color:red;display:inline-block;height:2.5rem;width:2.5rem;float:left;'>
<span style='vertical-align:middle;float:left;color:black;font-weight:bold;margin-left:20%;margin-top:15%'>7</span><div style='color:black;margin-left:140%;margin-top:3%;vertical-align:middle;width:50%'>very long text</div></div><br><br><br><br>

Note :- These number of <br> are necessary for further blocks to get added and to keep space between them.

Answer

I will share you my hack. I use   between two words that I always want to be together so in very long text you can write very long text.

  stands for non-break space.

Lastly, I would suggest you stick to semantic HTML, the habit will prove very helpful in future and there is always a way without compromising on semantics.

For eg, give class for margin at bottom to give gap between div(s) and eliminate <br>