There is no real guide for now other than the wide_brown_light (with the form preset: Online Booking Form) example that does exactly what you're trying to achieve.

1. Label tag widths are fine here but you may have to adjust (see 2.)
2. It sets the corresponding input tag width to 135px
   #cf_field_15,#cf_field_16,
   #cf2_field_15,#cf2_field_16,
   #cf3_field_15,#cf3_field_16{
   width:135px;
   }
3. Most important: it floats the LI elements the above fields are in to the left:
   li#li–16, li#li-2-16, li#li-3-16, li#li-4-16, li#li–15, li#li-2-15, li#li-3-15, li#li-4-15 {
   display:inline;
   float:left;
   margin:0pt 0pt 0pt 45px !important;
   }
4. Optionally you may have to adjust the margins for the above LI items, too:
   li#li–17, li#li-2-17, li#li-3-17, li#li-4-17 {
   margin-left:45px !important;
   margin-right:28px !important;
   }
5. Finally, after the last floated LI item, you need to clear with the next LI item:
   li#li–19, li#li-2-19, li#li-3-19, li#li-4-19 {
   clear:both;
   padding-top:10px;
   }

NOTE: The above LI#ABC element ID's are just what's being used in my example you form may have different ID's, you need to look these up in the actual HTML source code of the page your form is on.

To solve your other problem, this should give you a head start:

1. move 'Estimated Prints' above the 'Printing' field in your form configuration
2. once moved, add the following styles to the CSS:
   li#li–14 { float:right; margin: 0 64px 0 0!important; }
   li#li–15 { padding-top:16px; }
   .cf-box-group { clear:right; }