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

Question

I have a set of links which are stored within an unordered list. Inside each list item is:
The link which surrounds everything inside
An image on the left
Some text next to the image
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;
}

Answer 1

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;
}