I have a simple email sign up list that I'd like to be responsive.
Currently, when it wraps it just wraps each individual element as it overflows. 

The functionality I want is when the first element overflows that the whole form goes from vertical layout to horizontal.

Ex: (for wide screen lengths)

```
[Input Name]  [Input Email]   [Input Country]   [Submit]

```

It's not currently very responsive because as the screen size gets smaller or you move to a mobile device it will look like this:

```
   [Input Name]  
[Input Email]   [Input Country]   [Submit]

```

Or Like:

```
   [Input Name]  
[Input Email]   
  [Input Country]   [Submit]

```

It gets distorted. I want all the elements either on one line, or on 4 different lines.

For small screen widths (ie: mobile), it should look like this:

```
[Input Name.   ]  
[Input Email.  ]   
[Input Country ]   
[Submit.       ]

```

Any idea how to accomplish this using HTML and CSS?