Combining CSS codes from different forms on a new one

Why won't your solution work for my newly cloned form, 52935678586172?

That new form of mine, 52935678586172, is almost perfect.  I just need the Yes radio button to me moved on the same line as its question, like this:

Should we email you a copy of this? Yes

See your colleague's work on his cloned form 52922047317958. He made changes regarding a mis-aligned sub title. 

Your colleague's reply: Answered by ashwin_d on October 21, 2015 at 02:16 AM, and my reply IS HERE

(MY cloned form, 52935678586172 is from ashwin_d's form 52922047317958)

Anyway, at this point, the only thing left to fix on form 52935678586172 is the purple section above.

(I like ashwin-d's changes regarding the mis-aligned sub title; and I like your changes (shown in your post above) regarding text on one line.  Now, let's put both changes on one form, #52935678586172)

Based on your reply above you have liked the code given by my colleague Elton:

label#label_28 {
    display: inline-block;
}
div#cid_28 {
    display: inline-block;
    vertical-align: top;
    padding-left: 10px;
}

Now the reason why it is not working for all forms is because the code above is based on the IDs (the hash # shows this). So basically it makes the label with the ID label_28 as inline block and the second rule is then set for the div with the ID cid_28.

This means that the same needs to match your other form.

If you have 28 fields or more on the form, you will apply that style to the labels of that field.

If you wish to apply that CSS to all radio and checkbox fields on your form, that is very easy using this code:

/* For checkboxes */
li[data-type="control_checkbox"] > label {
    display: inline-block;
}
li[data-type="control_checkbox"] > div {
    display: inline-block;
    vertical-align: top;
    padding-left: 10px;
}
/* for radio buttons */
li[data-type="control_radio"] > label {
    display: inline-block;
}
li[data-type="control_radio"] > div {
    display: inline-block;
    vertical-align: top;
    padding-left: 10px;
}

Now in most cases, if not all, you will want to apply that code to the specific ID instead. To get the ID, my suggestion is to check out this guide: How to find Field IDs & Names

If you take a look at the code given by Elton, you can quickly see that the IDs are the same for both elements:

#label_28 and #cid_28 - and we are interested in the bold part - the numbers. This means that once you see the ID of the field that you want to style in the same manner, you remember the number and grab that code and change the 28 to the number of the ID you got previously - and that is it.

Now, at this form, the ID is 28 - just the same and I see that you have already applied the code by Elton which is good - you should leave it.

All that we need to add here is to add this code (only this code):

div#cid_28 {
    width: 55px;
}

- This will make sure that the Yes part is not as long as it was - so that everything can fit the entire row (left to right).

Do add the CSS after all the other code by following the steps here: Inject Custom CSS Codes and please do let us know how it goes :)

Thank you!

On behalf of my colleague, you are most welcome.

If you need assistance with anything else, please do not hesitate to open a new support thread about it, and we'll do our best to help.