CSS formatting of radiobuttons

Question

Given the following HTML fragment:

<span name="foo" class="foo-class">
   <input name="foo" value="0" id="foo2_0" type="radio">
   <label for="foo2_0">The Server Side</label>
   <input name="foo" value="1" id="foo2_1" type="radio">
   <label for="foo2_1">Java Lobby</label>
   <input name="foo" value="2" id="foo2_2" type="radio">
   <label for="foo2_2">Java.Net</label>
</span>

<span name="bar" class="bar-class">
   <input name="bar" value="0" id="bar2_0" type="radio">
   <label for="bar2_0">The Server Side</label>
   <input name="bar" value="1" id="bar2_1" type="radio">
   <label for="bar2_1">Java Lobby</label>
   <input name="bar" value="2" id="bar2_2" type="radio">
   <label for="bar2_2">Java.Net</label>
</span>

Is there CSS that will layout the radiochoices in foo horizontally:

The Server Side Java Lobby Java.Net

And the radiochoices in bar vertically, as if they had been separated with <br/>?

The Server Side
Java Lobby
Java.Net

Or do you need to add css class attributes to the radiobuttons, or to the labels, or both?

On edit: this is generated code, so while the span tags can be changed to whatever you wish, the only possible changes to the tags inside the spans (the input and label tags) is the addition of css classes to the inputs and labels. (If I wanted easy, I'd have wrapped each radiochoice in an <li>...</li>. Unfortunately, I have to work with what I've got.)

Note: a perfectly acceptable answer is, "this can't be (portably) done, find a better way to generate the code, buddy", though if that's the answer, give me some idea of why.

---

Ah, excellent! Not only does jdangel's solution work, it works if I assign the same CSS to divs enclosing the spans. Thank you jdangel.

Answer 1

EDITED BASED ON FEEDBACK: That sucks. Try:

.bar-class label {display:block; margin-left: 30px;clear:right;}
.bar-class input {float:left;clear:left;}