I'd like to align my thumbnail image vertically inside my div - alongside text.

See the example in this Fiddle: <http://jsfiddle.net/jL5bpmp1/12/> 

Boxes 2 & 3 work great but 1 is too high up the div.

How do I resolve this?

```css
* {
    margin:0
}

.box {
    -webkit-border-radius: 20px;
    -moz-border-radius: 20px;
    border-radius: 20px;
    background-color:#0f89cf;
    height:55px;
    width:100%;
    padding:5px 0 0 0;
    margin-bottom:30px
}

.box img, .box div {
    /* float:left; */
    display:inline-block;
    vertical-align:middle;
    margin-left:10px;
}

.box h1 {
    color:#fff;
    font-size:18px;
    margin: 0;
}

.box h1 span {
    display:block;
    font-size:23px;
}
```

```html
<div class="is-mobile">

<div class="box">
    <img src="http://placehold.it/30x30">
    <div>
        <h1>Chat to us online now</h1> 
    </div>
</div>

<div class="box">
    <img src="http://placehold.it/30x30">
    <div>
        <h1>Call the Helpline
        <span>101 2333 9302</span></h1>
    </div>
</div>

<div class="box">
    <img src="http://placehold.it/30x30">
    <div>
        <h1>Make a General Enquiry
        <span>101 2333 9303</span></h1>
    </div>
</div>

</div>
```