Aligning elements in pairs in a web page - html

Question

I am writing an MVC3 page, and I have images with radio buttons next to them. I want each radio button to be on the same line as it's image, but not one image per line, I want it to flow through many lines, but in pairs. I've tried wrapping the two in a div and display:inline-block works, except the radio button is above my image, not next to it. white-space: nowrap; works, but by putting only one image per line ( I could do that with a ).
Here is the code, FWIW:
#foreach (xxx.Image im in Model.Images)
{
<div style="white-space: nowrap;">
#Html.RadioButtonFor(m => m.EmailImage, im.Id, Model.EmailImage == im.Id ? new { Checked = "checked" } : null)
<a href="/preview/#im.Url&h=251&w=600" target="_blank">
<img height="41" width="97" src="#im.ThumbUrl"/></a>
</div>
}
Thanks for looking.

Answer 1

The following example seems to be working: jsfiddle.
HTML:
<div class="left">
<input type="radio" value="check" />
google
<img src="http://placehold.it/41x97"></img>
</div>
<div class="left">
<input type="radio" value="check" />
google
<img src="http://placehold.it/41x97"></img>
</div>
<div class="left">
<input type="radio" value="check" />
google
<img src="http://placehold.it/41x97"></img>
</div>​
CSS:
.left
{
float:left;
}
.left a, .left input, .left img
{
display:inline-block;
vertical-align:middle;
}