Align radio button or checkbox labels to left and next to each other when wrapped

With radio buttons (or checkboxes for that matter), if the text of the option goes beyond a given length it wraps to a new line.

Can this new line be 'in line' with the text above it, or must is always wrap underneath the actual radio button itself? 

I have a large number of these options and it doesn't look very 'clean'

Yes, simply inject the following custom CSS codes to your form:

.form-radio-item label, .form-checkbox-item label {

white-space: normal;

display: block;

left: 14px;

top: -14px;

position: relative;

}

Please follow the steps from this guide to inject: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes. 

This is mostly great, thank you.

I applied the css, and it has definitely resulted in the effect I was after, however it also appears to put some extra space (padding maybe? - not sure) between the lines of the radio buttons or checkboxes.

It also appears to have affected a number of the button checkbox widgets I had set up with multiple buttons in multiple columns - one or two of these columns have now wrapped to a second line...

Any advice you can give would be appreciated.

Some of the radio button/checkbox fields don't have a label so it appears to have a space between them. You can adjust the spacing by adding the following custom CSS codes to your form:

.form-radio-item, .form-checkbox-item {

margin-bottom: -10px;

}

You can adjust the value until you'll get the desired space between each item.

The Button Checkboxes widget is not using the same class selector so the custom CSS codes shouldn't affect them. The columns are working as far as I could see it: