How to display elements in columns?

I have a form with many drop down boxes where I want the drop down box to be on the right of the name.  For some reason it keeps putting it under the name.  I have increased the form width with no changes.  Also I want each column to be fairly close to each other and line up with each other.

More info.... I have played with the spacing and the column lineup looks ok.  I just need to get the drop down box closer to the name.

I assume with "the names" you're referring to the images you have on your form: 

If so, you can do that with the following CSS code: 

.form-col-1 img.form-image {

    float: right;

    margin-right: 10%;

}

Note that you can change the "10%", this guide will also help you injecting the code to your form: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

I hope this helps. 

No what I mean by name is title on the dropdown field (ie Sephora $25 (5%)).  The actual selection field needs to be closer (higher up) to the name.  Right now there is too big of a gap between the name and the actual dropdown field.

Also, if you look at the Retail tab the last four items (starting with Sephora) look great when in edit mode, but when in preview mode they don't.  The column is way out of wack.  I do have CSS associated with these fields but again it looks good in edit mode so not sure why it doesn't look good in preview.

One last thing, how do I change the background color of the Grand Total field (on last page)  I want it be the same color as the background so it doesn't look like an entry field.

Thanks

You can display the elements close to their labels with the following CSS code: 

.page-section:nth-child(3) [data-type="control_dropdown"] .form-label, .page-section:nth-child(4) [data-type="control_dropdown"] .form-label {

    padding-bottom: 0px;

    margin-bottom: 0px;

}

Regarding the code not working on preview, it seems to happen due to a syntax error: 

Kindly correct the syntax to the following: 

Note that you may need to change the current values you have in order to display the fields as desired. 

Regarding the last question, you can change the field with this code: 

input#input_34 {

    background-color: transparent;

    border-width: 0px;

}

I hope this helps. 

Thanks!... I got the last bit (color change) but the code to move the dropdown closer to label did not do anything.  Any suggestions?

May you please kindly provide an example about the space you want to reduce? 

Here's an image of the fields I assume you want to reduce the space: 

We will wait for your response. 

Well.... the form does not display this way in edit mode, so I thought the last changes I made didn't work but apparently it did as it shows correctly in "live" mode.  No other assistance is needed.

The CSS given works great for one page but I want this on pages 2-6.  What do I need to change for this to happen?

Can you please confirm first that you were still referring to your form https://www.jotform.com/91719373565164

I checked the form and from what I see now is that the image and items were horizontally closer side by side

We will wait for your updated response.

Yes this is the form..... if you follow the message trail you will see that what I was trying to do was get the title of the drop downs closer to the actual drop down fields.  I had been given this CSS code

.page-section:nth-child(3) [data-type="control_dropdown"] .form-label, .page-section:nth-child(4) [data-type="control_dropdown"] .form-label {

    padding-bottom: 0px;

    margin-bottom: 0px;

}

but this seems to work on only one page.  I need this to work on all the pages.

Thank you for the clarification. I checked the form again and I see other issues now as well.

Please allow us some more time to figure out the needed CSS codes to fix the issue. We will update you here as soon as we can.

Thanks... I don't know much about CSS so I appreciate the help.

I made adjustments on the custom injected CSS codes on your form.

Can you please test/check the form again. 

In my test form, the dropdown field is closer to the field label names on top of it.

Example:

Let us know how it goes.