Separating radio button selections into another row in SharePoint

Came across an interesting problem when an user requirement is to separate the radio buttons into two different rows in a form. Plus attaching some click events to both selections. It took me about 15 mins or so to figure out but I thought it was interesting. SharePoint renders the radio buttons together as something like this:

<SharePoint:FormField runat="server" id="ff2{$Pos}" controlmode="New" fieldname="No_x0020_Knowledge" __designer:bind="{ddwrt:DataBind('i',concat('ff2',$Pos),'Value','ValueChanged','ID',ddwrt:EscapeDelims(string(@ID)),'@No_x0020_Knowledge')}" />

You can't simply move one as you would if you are using html. Thankfully, a little jQuery and a little css comes to the rescue. The solution is actually a real simple one. BTW, I did tried using just jQuery to move the the 2nd radio button down but the attached click event was lost somehow.

On to the solution. If you have a field with selections 'A' and 'B', you want to move 'B' to the next row, the jQuery line:

$("span[title='B']").addClass('positionB');

of course the css:

.positionB{
position:absolute;
left:23;
top:355;
}

The after effect:

The attached events for each radio button also worked. You would need to update the left and top positions to fit your needs though.