How to make <span> the same height as <input type="text">

Question

I'm trying to put a element to the left of a element, however I can't seem to make them the same height and align with each other. The span always seems to be positioned a little higher.

Anyone got any ideas?

Sparkles*

Edit: HTML section

<label for="name">Username: </label>
<input type="text" name="name" id="name" value="" maxlength="15"/>
<span id="box" style="display:none"></span>

CSS

span.box{
    position:absolute;
    width:100px;
    margin-left:20px;
    border:1px;
    padding:2px;
    height: 16px;
}

input.name {
    width: 115px;
    height: 14px;
}

Answer 1

If you want to vertically align items in the same line, you probably don't need to make them the same height - just give them the same value for the vertical-align property.

.myinput, .myspan {
  vertical-align: middle;
}

What a lot of people don't understand with vertical-align is that in order for things to be vertically aligned to the middle, everything in that line has to have a vertical-align property of 'middle' - not just one thing (like the span).

Imagine an invisible horizontal line running though any inline content. Usually the baseline of text, and the bottom of images, are lined up with this line. However, if you change vertical-align to middle, then the middle of the element (text span, image etc) is aligned with this line. However that's not going to line up vertically with other items if they are still aligning their bottom or baseline to that line - they would need to align their middle to that line too.