HTML - Text besides div in a line when spaces added-CodePudding

I have html -

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.

CodePudding user response：

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>

CodePudding user response：

Maybe Change the approach on how you build the code. there's lot of useful css properties like grid or flexbox. here's the example using flex

.c1 {
  border: 1px solid red;
  display: flex;
  align-items: center;
  gap: 10px;
}

.c2 {
  background: red;
  width: 50px;
  height: 50px;
  display: flex;
  justify-content: center;
  align-items: center;
}

.c3 span {
  display: block;
  border: 1px solid green;
}

<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:100%;'>
      <span >very</span>  
      long text
    </div>
  </div>
<br><br><br><br>



<div >
   <div >
     7
   </div>
   <div >
     <span>very</span>
     long text
   </div>
</div>