So you have an image, and a heading that you want next to each other. That is the question. Your image is super huge – with tons of white space. You should crop it down to the actual size of the image. That doesn't make any sense.
The relevant html is:
<a href="#" class="company-logo">
<img src="http://placehold.it/100x100" />
</a>
<div class="name">
<p>Something Something yeah</p>
<p>Bla bla bla etc etc etc.</p>
</div>
Shows how block level elements act. (divs, p, etc. are display: block
by default)
They are width 100% by default, so they push one another to the next line. This is normal.
Shows these 'display: block' level elements floating left, which brings them to the same line (as long as their combined width isn't wider than the screen... in which case, again, they will push each other to the next line
Shows the elements as display: inline-block
and vertically aligned to each other with `vertical-align: middle' - you can't have these elements floating or they will still act like block elements and wont follow your inline-block rules, so you may need to put float: none; if you are in a responsive context where you have them floated in another circumstance.