How to put logo in left, and text vertically-aligned next to it?

Question

In my header, I want my logo to the left, and text to the right of it:

1. If there's enough space, text should be in one line vertically-align to the middle.
2. If there isn't, text should reflow to 2 lines, preferably aligned to the middle as well.

I can satisfy (1) with the below code. But once I reduce the width of the whole page, the h1 is displayed below the img. If I remove the h1 {display:inline-block}, then the h1 is displayed correctly to the left of the img - but then the vertical-align dosn't take effect.

How can I achieve both?

<img src="http://test.tipulnagish.co.il/wp-content/uploads/2015/11/tick-1015459_640.png">
<div>
    <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
</div>

img {
    height: 100px;
    width: 120px;
    margin: 15px 10px 15px 10px;
    float: left;
}
div {
    height: 130px;
    line-height: 130px;
}
h1 {
    display: inline-block;
    line-height:normal;
    vertical-align: middle;
}

Demo

Answer 1

You can try this https://jsfiddle.net/4mzj50sx/6/

HTML

<div class="div">
    <img src="http://test.tipulnagish.co.il/wp-content/uploads/2015/11/tick-1015459_640.png">
    <div>
        <h1>Lorem ipsum dolor sit amet, consectetur adipiscing elit.</h1>
    </div>
</div>

CSS

.div {
    display: table;
}

div {
    display: table-cell;
    vertical-align: middle;
}

img {
    height: 100px;
    width: 120px;
    margin: 15px 10px 15px 10px;
    display: table-cell;
    vertical-align: middle;
}