Responsive Web Form

HTML & CSS
1

I am dealing with an issue with aligning an input field and a submit button horizontally. Out of the box it works fine but I don’t like the height being too narrow. So I tweaked the two input tags to have more padding but that’s where the issue begins. Here’s a link to the problem: link

Scroll down to the bottom and you will see two examples. The first example (A) looks fine on all devices and browsers but the second one does not. The height for each input field of example (B) differs in height. The input entry field is smaller in height than the ‘Go’ button for desktop using Firefox. However, it’s the opposite when viewed on android devices.

Is there a trick to get it to align correctly both having the exact same height? I have also Googled this to find this kind of example but I have yet to find any.

Thank you for your time.

2

You could play around with table display. For example, something like this:

form div {display: table; width: 100%;}

form div input {margin: 0; float: none; display: table-cell; padding: 5px;}
3

Thank you. That made a great improvement. I still get a 2px difference on desktop but it seems to be good for mobile devices.

4

Thank you. That seems to help a lot. Desktop seems to have 1px at top and bottom difference. Mobile devices seems fine. You can check the same link to see the results.

5

Are you sure the page has been updated? I don’t see ay changes.