Every checkbox is considered a separate element, grouping is not supported per se in the way you described it above.
CSS wise it'd be possible to address check box blue & checkbox red and change the styling so they would float next to red and green to the left, however the form HTML code contains a <BR/> in between each new form element/label pair – and that <br/> between line 1 red – blue would need to be removed.
If you're serious about this feature, you could
- give each <br> an ID,e.g. <br id="brX"/>
- change the CSS on a per field basis:
- set display:none; for the breaks in-between checkboxes on the same line
- set display:none; for checkbox labels in-between checkboxes on the same line
- adjust the width of the style label.cformlabelafter so you can fit more checkboxes on one line
For item 1 above, I can give you the code pieces if you want to implement it.