[FIXED] how to align the tops of two spans located inside of a div?

Issue

I'm trying to make the top of the cat picture align vertically with the top of the text seen in the following picture:

As you can see, the text is lower than the pic.

Here is the CSS and HTML:

<div>
  <span style="vertical-align: top; width: 5%; float: left"><img width="80px" src="./5 Bilder_Logos/cat.jpeg"/></span>
  <span style='vertical-align: top; width: 95%; float: right;font-size:10.0pt;font-family:"Arial","sans-serif";color:black'><o:p>&nbsp;</o:p></span></p>
  <p class=EinfAbs style='margin-top:5.65pt'><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:#21438B;letter-spacing:.4pt'>AWARD WINNER 2019 </span></b><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:red;letter-spacing:.4pt'>(14 pt Arial Bold)</span></b><b><span lang=EN-US style='font-size:14.0pt;line-height:120%;font-family:"Arial","sans-serif";color:#21438B;letter-spacing:.4pt'><o:p></o:p></span></b></p>
  <p class=MsoNormal><span style='font-size:10.0pt;font-family:"Arial","sans-serif"'>Erionsequiat. Ibus apel everehe nectinihil et, quia <br>nonestrupta cuptaesed que peri nam nonsedi tempore,  <br>ut enimaione nonsedi vitat. <span style='color:red'>(10 pt Arial Regular)</span>
</div>

When I searched for similar problems online, the answer seemed to be to use vertical-align: top. This didn't help in my case. Can anyone help me figure this out? Thanks.

Just one thing: the answer must use basic css, no grid or flexbox. This is because I need it to be viewable on all browsers.

Solution

Try this :

.html

<div class="example">
  <img src="…">
  <p>Award……</p>
</div>

.css

.example {
  display: inline-block;

  img, p {
    vertical-align: top;
  }
}

I suggest you to remove all your style attribute and to put it in classes :)

Answered By - Eudz

Answer Checked By - David Marino (PHPFixing Volunteer)