How to display fields inline on my embedded form?

Hi, 

I created a form see below but the format doesn't keep when I am pasting it on my website see the other image below. 

it keep making it a column instead of a a one line

How can I fix that ? 

That happens due to the form's container size, may be that the container has not enough size to display the form fields inline. However, it can be fixed by injecting the following CSS code to your form: 

.form-line:not([data-type="control_button"]){

    width: 50%;

}

This guide will help you to inject it: https://www.jotform.com/help/117-How-to-Inject-Custom-CSS-Codes 

If the issue still persists, please share us the webpage  where you have embedded your form, we will be glad to take a look on it. 

Hi, I tried and did not work I am fine with having the submit button under I really want the two field to be inline.

May you please try with this one? 

It has added the "!important" rule that overrides other CSS codes:

.form-line:not([data-type="control_button"]){

    width: 50% !important;

}

I also checked your webpage http://www.squashrevolution.com/ and was unable to find the embedded form, please try embedding it and let us know where can we find it, we will be glad to check it for you and provided with the needed code or instructions to display your form as desired. 

Looking forward to your response. 

I have embedded it. If you could take a look. Thank you very much

I have checked your web page and see that the form fields are now displayed side by side. Please do not hesitate to get back to us if you need any further assistance. We will be happy to help.

Thank you for using JotForm!