how can I reorganise the product options layout

I am creating a site for an optician. There are lots of custom option ‘select’ boxes which are making the page size too big. At the moment the option select boxes show like this:
 
*Option Label1
Here is the select drop down 1
*Option Label2
Here is the select drop down2
*Option Label3
Here is the select drop down2
 
I want to display them ON ONE LINE WITH THE LABELS FIRST
*Option Label1    Here is the select drop down 1
*Option Label2    Here is the select drop down 1
*Option Label3    Here is the select drop down 3
 
OR TH BETTER OPTION IS TWO PER ROW LIKE THIS:
*Option Label1                                  Option2 Label
Here is the select drop down 1            Here is the select drop down2
*Option Label3                                  Option4 Label
Here is the select drop down 3            Here is the select drop down4
 
I have reduced the widths of the fields in template css  lines   106
.product-options dd select {
    width: ;  /*  maz product options selct box was 99% wide*/
}
 
Also in this file app/design/frontend/base/default/template/catalog/product/view/options/wrapper.phtml
I changed the <p> around the options to <span> … I was hoping it may put each custom option NEXT to each other on one line, but that didnt work either. Your help would be really appreciated. Many thanks.