Change Width of a Form Element

I would like to make my form horizontal in layout. I have two fields: email and message. I have them aligned horizontally by 'shrinking' the fields and I'd also like them to take up more room on the form. I've tried CSS etc but can't seem to adjust the size of the field to take up more room on the form yet have the two elements remain horizontal. 

How do I do this?

Inject this CSS code to your form to expand the field in its container. Preview the form afterward to see the result.

@import url('https://shots.jotform.com/elton/genericTheme.css');

Guide: How to Inject Custom CSS Codes

Result:

thanks.

Unfortunately the CSS doesn't work work in all resolutions. When I go to 768 it stacks vertically. Is there a way you can share the CSS so I can see if it can be revised?

According to my tests, it stacks on 671px width:

And it's part of the responsiveness CSS.

You can try inserting the below CSS:

@media screen and (max-width: 767px)

.jotform-form .form-all {

    width: 101%!important;

}

That should decrease the width and form will stack on 625px width.

Let us know if you have any further questions.

Thank you!

Sorry I didn't get back to this sooner. Perhaps I'm not saying it right but what I'm looking to do is use .form-textarea (message) and make it a bit wider than it presently appears. Same with .form-textbox (email).

For some reason I can't get the CSS to work. It's as if there's a container that is keeping both from becoming wider. Any ideas? Thanks

You can change the textbox and textarea width in your form advanced designer, see screenshot below.

Guide:

1.) Go to your form builder
2.) Click form designer
3.) Click the Advanced CSS editor

Please give it a try and let us know how it goes.