How to make an element stay on same line - html

Question

I'm trying out some things with a material designe framework but some things just won't work.
Here is what i got:
screenshot
But I want the text to start on the top and stay there so the text won't jump into another line like in the picture.
I hope you guys can help me.
<p><img src="http://placehold.it/350x150" alt="W3Schools.com" width="100" height="140">
Lorem ipsum dolor sit amet, consectetur adipiscing elit.<br/>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p>

Answer 1

I would use a table, like this:
<table><tr><th><img src="yourimgsrc.jpeg"></th><th><p>Your text here</p></th></tr></table>
This prevents your problem, because the two rows (<th>) end on the same height

Answer 2

I believe this is what you are looking for. You will have to have both, the IMG and the text in one <div> and then surround both of them in a separate <div>
#header{
display:flex;
flex-direction:row;
}
#column1{
display:flex;
flex-direction:column;
}
#column2{
display:flex;
flex-direction:column;
padding-left: 20px;
}
<div id="header">
<div id="column1"><img src="http://placehold.it/350x150" alt="W3Schools.com" width="100" height="140"></div>
<div id="column2"><p>Lorem ipsum dolor sit amet, consectetur adipiscing elit<br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit. <br/> Lorem ipsum dolor sit amet, consectetur adipiscing elit.</p></div>
</div>