CSS - Exact same height and alignment of button and input text box

Question

I need to have a button and a tex box sitting next to each other and they have to align up perfectly as if one is bigger than the other then it will be instantly noticeable.

Answer 1

In 2019 you want to be using CSS Grid for your forms even if they just have one input and one button.

This saves a lot of pain.

I have lots going on with my working example so I will not post a working example here. Instead, here are the things you need to know.

The outer container can be the form, CSS for this being display: grid; grid-template-rows: 2em; grid-template-columns: 1fr auto;

The input should have a label which I will assume is set to be hidden. So the CSS for the input has grid-column: 1; height: 100%; the button has grid-column: 2; height: 100%

You are going to do your own things with margins, backgrounds, paddings, borders, border radius and such like.

The crucial thing of getting the button to line up with the input is done with the grid row having a fixed height in ems or another sensible responsive friendly unit and the input and button being set to a height of 100%.

I did not find any of the above answers to result in as succinct and manageable code as the CSS Grid option which works for me on Firefox, Chrome and a Webkit based browser.

Note that if using CSS Grid then you need precisely zero div elements in your form, however, if using fieldsets you may need to set them to display: content as CSS Grid does not work with fieldset.