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

I'd suggest trying to style the parent element of the input/button pairing (a fieldset, in my example) in order to give a common font-size, and font-family, then using em measurements for styling dimensions/padding/margins for the child elements. Ideally styling all the child elements with the same CSS.

Given the following mark-up:

    

        A label for the text-input
        
        It's a button!
    

I'd suggest something similar, but adapted to your particular design, to the following CSS:

fieldset {
    font-size: 1em;
    padding: 0.5em;
    border-radius: 1em;
    font-family: sans-serif;
}

label, input, button {
    font-size: inherit;
    padding: 0.2em;
    margin: 0.1em 0.2em;
    /* the following ensures they're all using the same box-model for rendering */
    -moz-box-sizing: content-box; /* or `border-box` */
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
}

JS Fiddle demo.

---

Following the clarification that this is to replicate/reproduce the style of Google's adjoined text-input/submit button:

fieldset {
    font-size: 1em;
    padding: 0.5em;
    border-radius: 1em;
    font-family: sans-serif;
    border-width: 0;
}

label, input, button {
    font-size: inherit;
    padding: 0.3em 0.4em;
    margin: 0.1em 0.2em;
    -moz-box-sizing: content-box;
    -webkit-box-sizing: content-box;
    box-sizing: content-box;
    border: 1px solid #f90;
    background-color: #fff;
}

input {
    margin-right: 0;
    border-radius: 0.6em 0 0 0.6em;
}
input:focus {
    outline: none;
    background-color: #ffa;
    background-color: rgba(255,255,210,0.5);
}
button {
    margin-left: 0;
    border-radius: 0 0.6em 0.6em 0;
    background-color: #aef;
}
button:active,
button:focus {
    background-color: #acf;
    outline: none;
}

JS Fiddle demo.

Albeit the above works fine in Chromium 12.x and Opera 11.5 (Ubuntu 11.04), Firefox seems to show an extra pixel or two in the latter demonstration.