Multiple text lines next to the image wont work

Question

I am trying to add text next to the image. The tag stands in prefered position, but when I use
tag, the second line goes under the image. I found lots of similar questions in google, but non works for me. Here is the code:

#quality {
    float: left;
    margin-right: 10px;
    padding: 20px;
}

#security {
    padding-bottom: 10px;
}

<div id="quality">
  
  <div id="security">
  <img src="img/security.png">
  <h3>Title</h3>
  <br> 
  <span>Sample text is here</span>
  </div>
  
</div>

Answer 1

Remove the br tag after h3.

Try this html:

<div id="quality">
  <div id="security">
    <img src="img/security.png">
    <div class="rightDiv">
      <h3>Title</h3>
       <span>Sample text is here</span>
    </div>
  </div>
</div>

add CSS:

 #security img, #security .rightDiv{
    display:inline-block;
    vertical-align: top;
 }