jQuery UI Radio Button set line Breaks

when I am using two button sets, they do not display on same line. Is there a way to display both of these on the same line? Here is my code

html:

<div id="view">
<input type="radio" id="radio1" name="radio" /><label for="radio1">Regular</label>
<input type="radio" id="radio2" name="radio" checked="checked" /><label for="radio2">Investments</label>
<input type="radio" id="radio3" name="radio" /><label for="radio3">All</label>
</div>


<div id="lod">
<input type="radio" id="lod_S" name="radio" checked="checked" /><label for="radio2">Summary</label>
<input type="radio" id="lod_D" name="radio" /><label for="radio3">Detail</label>
</div>

javascript:

$('#view,#lod').buttonset();

Thanks in advance for the help.

The default styling for div elements causes one to be below the other. You can substitute span here.

jsFiddle

Or use CSS to change the styling of your divs:

<style type="text/css">
    #view, #lod {
        display: inline;
    }

</style>