Form elements out of place - html

Question

I'm struggling placing my form elements where I like them to be.
I like my recurrence_interval input field below my select (recurrence) input field.
My two radio boxes for never and on. On top of each other and the input field for ends_on_date below the check box for "On".
My html is as below.
<div id="dialog" title="Create new appointment">
<form id="df">
<label class="align" for="title">Title</label>
<input type="text" name="title" id="title">
<label class="align" for="when">When</label>
<input type="text" name="when" id="when">
<input id="repeat" type="checkbox">
<label id="repeat_text" for="repeat">Repeat...</label>
<div id="repeat_properties">
<label class="align" for="recurrence">Repeats</label>
<select id="recurrence">
<option value="1">Daily</option>
<option value="7">Weekly</option>
<option value="repeat-x-days">Every x day</option>
</select>
<input id="recurrence_interval" type="text">
<label class="align" for="ends_never">Ends</label>
<input id="ends_never" name="endson" type="radio" title="Ends never" checked="checked">
<label for="ends_never" title="Ends never">Never</label>
<input id="ends_on" name="endson" type="radio" title="Ends never">
<label for="ends_never" title="Ends never">On</label>
<input class="align" id="ends_on_date" type="text">
</div>
</form>
</div>
My css is as below.
.align {
display: inline-block;
float: left;
clear: left;
width: 30%;
text-align: left;
}
input[type="text"], input[type="radio"], select {
display: inline-block;
float: left;
clear: right;
}
#repeat
{
display: inline-block;
float: left;
text-align: left;
clear: left;
}
#repeat_text
{
float: left;
}
Anyone got a clue about how I can archive the above?
Edit: As seen here, at least with chrome, the fields are clearly out of place.

Answer 1

change your HTML structure for radio, try using this.
<label for="ends_never" title="Ends never"><input id="ends_never" name="endson" type="radio" title="Ends never" checked="checked"> Never</label>
<label for="ends_never" title="Ends never"><input id="ends_on" name="endson" type="radio" title="Ends never"> On</label>
edited
try to add styling label { float : left; }