CSS: Display email and phone fields on the same line?

On my form https://form.jotform.com/242484485546164 I'm trying to get the email and phone fields on the same line to save vertical space. I set them both to Shrink in Advanced settings and it shrunk them but didn't move them to the same line.

Hi Steve,

Thanks for reaching out to Jotform Support. To get the email and phone fields on the same line, we need to use CSS code to achieve it. Let me show you how to do it:

1. First, copy this code:

li#id_11 {

    margin-top: -86px !important;

    margin-left: 196px !important;

}

2. In Form Builder, click on the Paint Roller icon on the right side of the page to open Form Designer.

3. Now, in the Form Designer menu, click on the Styles tab.

4. Scroll down, and paste the copied code into the Inject CSS Code box. The code will be saved automatically. That's it.

Check out the result:

You can check out this Demo Form so you can try it by yourself. If you want to clone the form, you can check out this guide about How to Clone an Existing Form From a URL.

You can also check this guide How to Inject Custom CSS Codes.

Let us know if there’s anything else we can help you with. 

Thanks very much!