How to align a button over top of a text input?

How to align a button over top of a text input?

Here's what I've got:
HTML
<div class="combobox">
<input type="text" value="" name="brand" class="text" id="brand"><span
class="dropdown_btn"></span>
</div>
CSS
.combobox {
margin: 0;
padding: 0;
vertical-align: middle;
}
.combobox input {
height: 20px;
line-height: 20px;
margin: 0;
padding: 0;
}
.combobox .dropdown_btn {
width: 18px;
height: 20px;
margin-left: -20px;
display: inline-block;
cursor: pointer;
background-color: blue;
}
But it comes out like this:

I don't know where the gap is coming from; why isn't the text input snug
against its container div like the blue button is?