CSS: attach a button with perfect height alignment to input - html

Question

Let's assume for a second I do not wish to use Bootstrap.
How do you achieve his perfect vertical alignment of the input with its button? When I do it the button vertically misaligns. I do not wish to use "hacking" on the top-margin to fix this as I'm afraid it won't look well on all browsers.
How is bootstrap achieving this magic?
my goal is something like this:

Answer 1

I think the answer would be using box-sizing: border-box, as bootstrap does. This works across all recent modern browsers:
<input type="text" placeholder="Your text here">
<button>Button</button>
input{
float: left;
height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
button{
float: left;
height: 30px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
}
http://jsfiddle.net/4dgzbc3y/

Answer 2

You will have to use a container and display both as table cells (working jsFiddle):
Markup:
<div class="container">
<input type="text" placeholder="Your text here">
<div class="button">
<a>Button</a>
</div>
</div>
CSS:
.container{
display:inline-table;
vertical-align:middle;
}
input{
display:table-cell;
padding:5px;
}
.button{
display:table-cell;
background:gray;
padding:5px;
}
Note:
Keep in mind general things like both having the same font size and padding. To make it look slick you can round the outer corners same as in bootstrap :)

Answer 3

Have an input and button with explicit heights. The input and the button will need a comment between them to "connect" otherwise they will have na ugly space
.target {
height: 2em;
}
.target * {
height: 100%;
display:inline-block;
border:none;
outline:none;
}
.target input {
width:79%;
background-color:black;
padding-left: 5px;
}
.target button {
width:10%;
background-color: orange;
box-sizing: margin-box;
padding: 0; margin: 0;
border-top: 2px orange;
}
<div class="target">
<input placeholder="Foo" type="text"><!--
--><button>Bar</button>
</div>