html - ブラウザのサイズに合わせて画像のサイズが変更されない

Question

テキストの横に画像を表示しようとしています。テキストの垂直方向の中央に配置したいが、左にオフセットして、テキストと重ならないようにしたい。これを実現できますが、ブラウザのサイズを変更して小さくすると、画像が移動しません。

テキストをテキスト内に配置しようとしましたが、そのたびにテキストが適切に中央に配置されません。また、画像の下にリンクを追加する必要があるため、これが最善の方法ではないと思います。

ここに私のコードの問題の JSBin があります: http://jsbin.com/evasix/2/

HTML:

<div class="middle">
    <div class="side-img">
        <h2>Millions of entrepreneurs, freelancers, small<br>businesses, and departments inside big<br> organizations rely on our web apps.</h2>
        <img src="images/img-customerss.png" class="customers">
    </div>
</div>

CSS:

h2 {
    position: relative;
    top: -30px;
    text-align: center;
    font-size: 45px;
    color: #232323;
    font-family: 'Crimson Text', serif;
    line-height: 50px;
}


.customers {
    position: relative;
    bottom: 150px;
    left: 425px;
}