Inline elements with wrapping text, not floated though and vertical aligned

I have a set of links which are stored within an unordered list. Inside each list item is:

1. The link which surrounds everything inside
2. An image on the left
3. Some text next to the image
4. An arrow next to the text to continue

The text could be any length, meaning the overall link could be any height. More importantly, the width of the overall link must be 100% (it's for a mobile phone so could be portrait / landscape).

To ensure that I do not need to set widths I have tried to avoid unnecessary containers, simply setting the image to be vertical align. The problem comes in that if my text is too long it wraps but appears below the image (makes sense just hoped it wouldn't), see here: http://jsfiddle.net/mP2fr/9/ (you may need to resize your browser window to see the effects). My solution was to put the text inside a and set to inline-block, but these defaults a width of 100% pushing it below the image. I can set a width which will bring it back inline (and allow for multiple lines) but this involves setting the width, see here: http://jsfiddle.net/mP2fr/7/

HTML 1:

<ul>
    <li>
        <a href="#">

            <img src="http://www.mtlettings.co.uk/images/uploads/properties/191-9163_IMG_thumb.JPG" width="400" />

            hello world asd ad asdasdg
        </a>
    </li>
</ul>

CSS 1:

li {
    background: red;
}

a {
    padding-right: 50px;
    display: block;
    background: url('http://www.perfectgetaways.co.uk/admin/system/preview/img_thumb_29706_125x125') no-repeat right center;
}

a img {
    display: inline-block;
开发者_如何学编程    vertical-align: middle;
}

 

HTML 2:

<ul>
    <li>
        <a href="#">

            <img src="http://www.mtlettings.co.uk/images/uploads/properties/191-9163_IMG_thumb.JPG" width="400" />

            <span>
                hello world asd ad asdasdg
            </span>
        </a>
    </li>
</ul>

CSS 2:

li {
    background: red;
}

a {
    padding-right: 50px;
    display: block;
    background: url('http://www.perfectgetaways.co.uk/admin/system/preview/img_thumb_29706_125x125') no-repeat right center;
}

a img {
    display: inline-block;
    vertical-align: middle;
}

a span {
    display: inline-block;
    vertical-align: middle;
    width: 160px;
    background: aqua;
}

---

Got a solution, inspired by one of Anagio's comments. Involves setting the img and span to display as table-cells and the outer a tag to a display as a table. This positions the stuff side by side and allows for the text in the span tag to push down over multiple lines. Not great IE support as it breaks below IE8 but for my particular scenario which is a mobile app I'm satisfied. Here's the final code: http://jsfiddle.net/chricholson/xW3qr/2/

HTML:

<ul>
    <li>
        <a href="#">

            <img src="http://www.mtlettings.co.uk/images/uploads/properties/191-9163_IMG_thumb.JPG" />

            <span>
                hello world asd ad asdasdg asdf asdf asdf asdfasdf 
            </span>
        </a>
    </li>
</ul>

CSS:

li {
    background: red url('http://www.perfectgetaways.co.uk/admin/system/preview/img_thumb_29706_125x125') no-repeat right center;
}

a {
    display: table;
}

a img {
    margin: 0;
    padding: 0;
    display: table-cell;
    vertical-align: middle;
    width: 300px;
}

a span {
    padding-right: 60px;
    display: table-cell;
    vertical-align: middle;
}