How to display phone number and full name fields inline?

Last thing: I don't know how to fix it but on my main form "Grossmont Union High School District" where you can enter "First & Last Name" and "Area Code & Phone", Why are they on top of each other?

I want them side-by-side.  

Student Name:    First Name: [ box]    Last Name: [ box ]

Billing Phone Number:   Area Code: [ box]    Phone Number: [ box ]

Could you please tell me how to fix that? 

Thanks,

Al 

Please try injecting this CSS code to your form: 

[data-type="control_fullname"] span, [data-type="control_phone"] span{

 display: inline-block;

}

[data-type="control_fullname"] div, [data-type="control_phone"] div {

    max-width: 100%;

    width: 50%;

}

[data-type="control_fullname"] .form-sub-label-container, [data-type="control_phone"] .form-sub-label-container {

    width: 45%;

}

input#input_16_area {

    width: 78%;

}

This guide will help you to inject the code: How-to-Inject-Custom-CSS-Codes

Here is my cloned form where I did apply this: https://form.jotform.com/61824570371960 

Please do let us know if you have questions, we will be glad to help. 

Ok, that worked but...

Can I make the boxes any wider? They are super small now.

Thanks,

Al

I have checked the form you're working on and here's what I see when I viewed it.

However, if you want to make the fields wider, you can also add the Custom CSS codes below to your form.

.form-input {

    max-width: 186px !important;

}

input#input_16_phone {

    width: 109px;

}

I was looking at the fields in the area where you can build it (See attached photo). Once I previewed it, then it looked like the image you showed me.

Thanks.

I have corrected the codes, please check again. 

I failed to mention that I also added the Custom CSS you sent me and everything looks fine now.

Al

That's great to know. Please contact us again if we can help in any way.