html - ブロック内のテキストが低すぎる場合は、ブロックを垂直方向に中央揃えにする

Question

私はバックエンド コーダーで、フロントエンド開発の初心者ですが、今は自由な時間があり、HTML / CSS の基礎を学びたいと思っています :)

これらの画像は私の質問を説明しています:

私はフォローしています。左側に簡単な情報、右側にタイトル。

しかし、タイトルが長い場合、私のマークアップはうまくいきません:

これを達成したい（ペイント）：

つまり、タイトルが長すぎる場合は、メイン (グレー) ブロックの高さを増やし、そのコンテンツを垂直方向に中央揃えにしたいと考えています。

これが私のコードです：

<div class="header"> <!-- Main (gray) block -->
    <div class="author">
        <div class="left">
            <img src="http://cs421319.vk.me/v421319968/b0e1/ljfuXCyMOFI.jpg" width="50" height="50"/>
        </div>
        <div class="author_details">
            <span class="name">_Dark_</span>
            <br>
            <span class="time">01.01.2014 — 23:59 </span>
        </div>
    </div>
    <div class="title">
        <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse sollicitudin, est non tempus lacinia, urna. </h1>
    </div>
</div>

そしてそれ以下：

.header {
    min-height: 60px;
    background-color: #EEE;
    padding: 5px;
    -moz-box-sizing: border-box;
    box-sizing: border-box;

  .title {
    display: inline-block;
    vertical-align: top;
  }

  h1 {
    font-weight: normal;
    font-size: 24px;
    margin: 0;
  }

  .author {
    max-width: 200px;
    display: inline-block;
    border-right: 1px solid #CCC;
  }

  .author_details {
    margin: 0 0 0 55px;
    padding: 0 5px 0 0;

    .name {
        font-size: 20px;
        font-weight: bold;
    }

    .time {
        font-size: 12px;
    }
  }
}

私の問題を悪く説明して申し訳ありませんが、どうすればいいのか本当にわかりません。私の（醜いかもしれない）コードについてアドバイスが欲しいです:)

これが現在のマークアップを含む JSFiddle です