need to vertically align a span with a input type="text"

Question

here is the live link: http://mrgsp.md:8080/awesome/foobar click create and after save to get validation messages (spans), they are vertically aligned a bit higher than the text inputs

How to align them vertically the same as the text inputs ?

Answer 1

If all items are aligned that way, assign them a class and use:

position: relative;
bottom: 5px; /* for example */

Answer 2

Not entirely sure about how you're generating the markup on the server side, but a better way of doing the form is to use label - input pairs inside an unordered list. Make the labels inline blocks, give them a width, then use vertical-align to get their alignment centered.

HTML:

<ul>
    <li><label for="name">Name: </label><input id="name" name="name" type="text" /></li>
    <li><label for="person1">Person 1: </label><input id="person1" name="person1" type="text" /></li>
    <li><label for="hobby">Hobby: </label>
        <select name="Hobby" id="hobby">
            <option value="0">not selected</option>
            <option value="1">swimming</option>
            <option value="2">gaming</option>

        </select>
    </li>
</ul>

CSS:

li label {
    display: inline-block;
    width: 80px;
    vertical-align: baseline;
    text-align: right;
    margin-right: 20px;
}

li input, li select {
    padding: 3px 4px 4px;
    width: 300px;
    border: 1px solid #ccc;
    font-size: 13px;
}

See: http://jsfiddle.net/pCCsg/ for the complete example. If you can't change the markup, this should still work for your current HTML. Just replace the label and input, select selectors with the classes you're using.