CSS: header and subheader vertically aligned with image

Question

I am trying to achieve similiar effect to this:

The header and its subheader are both vertically aligned to the image.

I've written following code:
http://jsfiddle.net/u4zxn4eb/

It works but is it the best way to achieve this?

<div class="wrapper">
 <h1>
    <a href="#"><img src="https://s3.amazonaws.com/uifaces/faces/twitter/sachagreif/128.jpg" alt=""></a>
    <div class="vertical_align">
        <a href="#">Your company's name</a>
        <p>Description</p>
    </div>
 </h1>
</div>  

CSS:

body {
    background: lightgrey;
}
.wrapper {
    background: grey;
    width: 100%;
}
h1 {
    font-size: 18px;
    margin: 0;
    position: relative;
    top: 35px;
}
.vertical_align {
    display: inline-block;
    vertical-align: middle;
}
img {
    display: inline-block;
    vertical-align: middle;
    margin-right: 10px;
}
p {
    margin: 0;
}

EDIT
As @chrisbedoya suggested I shouldn't put div inside h1 tag.
Deleted.

Instead of using h1 tag to position the whole, it's better to apply these rules separately:

.vertical_align a, 
.vertical_align p {
   position: relative;
   top: 40px;
}

Answer 1

I would use a position: relative property to align the image slightly below the header like you have in your image there.

Answer 2

Well, define "best". If your method is standards compliant and works in all browsers then use it. If you're interested, here's how I'd do it:

<style>

 #header {
  height: 100px;
  margin: 0px;
  padding: 0px;
  width: 500px;
 }

 #rectangle {
  background-color: #f0f0f0;
  height: 80px;
  margin: 0px;
  padding: 0px;
  position: absolute;
   left: 0px;
   top: 0px;
  width: 500px;
  z-index: 1;
 }

 #square {
  background-color: #ff0000;
  height: 80px;
  margin: 0px;
  padding: 0px;
  position: absolute;
   left: 20px;
   top: 20px;
  width: 80px;
  z-index: 2;
 }

 #text {
  /* background-color: #00ff00; */
  margin: 0px;
  padding: 0px;
  position: absolute;
   left: 120px;
   top: 41px;
  width: 360px;
  z-index: 2;
 }

 h1 {
  font-family: Arial;
  font-size: 20px;
  line-height: 20px;
  margin: 0px;
  padding: 0px;
 }

 p {
  font-family: Arial;
  font-size: 12px;
  line-height: 12px;
  margin: 5px 0px 0px 0px;
  padding: 0px;
 }

</style>
<div id="header">
 <div id="rectangle"></div>
 <div id="square"></div>
 <div id="text">
  <h1>Company Name</h1>
  <p>Company Tagline</p>
 </div>
</div>

Answer 3

Well, this question is way too subjective and better suited for CodeReview. But I thought I'd give you my input.

First, let's clean up the HTML. Get some HTML5 in there as well.

<div class="wrapper">
    <header>
        <a href="#" class="logo-link">
            <img src="https://s3.amazonaws.com/uifaces/faces/twitter/sachagreif/128.jpg" alt="">
        </a>
        <div class="vertical_align">
            <h1><a href="#">Your company's name</a></h1>
            <h2>Description</h2>
        </div>
    </header>
</div>

Then make the CSS nice and tidy. We don't need much:

.logo-link {
    display: inline-block;
    position: relative;
    top: 24px;
    margin: 0 24px;
}
.logo-link img {
    display: block;
}
.vertical_align {
    display: inline-block;
    vertical-align: top;
}

Here's an example.