Question: I currently have a simple form with a label positioned above the input box and added a second label element to use for a hint/error message.

```
<form id="registerForm" method="POST" action="register_post.php">

    <p class="form-registerUserName">
        <label for="registerUserName">User Name</label>
        <span class="required">*</span>
        <input
            id="registerUserName"
            type="text"
            size="24"
            maxlength="24"
            value="<?php echo $_SESSION['registerUserName'];?>"
            onkeyup="validateName()"
            onblur="validateName()"
        >
        <label class="hint" for="registerUserName">hint error</label>
    </p>
</form>

```

What would be the best way (css-wise) to position the second label element to the right of the input box a fixed distance and centered vertically to the box? Is this the best way to add an element for a hint to the html?

I am trying to make it look like the first example on this page: <https://ux.stackexchange.com/questions/26173/what-is-best-practice-for-designing-form-error-messages>

Thanks in advance.

Answer: 
There are many ways, I like this one: (*Added a wrapper to input element in HTML*)

```
p > label, p > span {
    display: table-cell;
    vertical-align: middle;
}
p {
    display: table;
}
p > .input-wrapper + label {
    padding-left: 10px;
    max-width: 200px;
}

```

**[Working Fiddle](http://jsfiddle.net/Ymmu7/3/)**

[**Updated Fiddle**](http://jsfiddle.net/Ymmu7/4/)
I would do it by putting the to labels in a wrapper div then floating them left to make them go side by side, then use padding on the 2nd label to adjust the spacing like so.

```
<form id="registerForm" method="POST" action="register_post.php">
<div id="wrapper">
<p class="form-registerUserName">
    <label for="registerUserName">User Name</label>

    <span class="required">*</span>
    <input
        id="registerUserName"
        type="text"
        size="24"
        maxlength="24"
        value="<?php echo $_SESSION['registerUserName'];?>"
        onkeyup="validateName()"
        onblur="validateName()"
    >
    <label class="hint" for="registerUserName">hint error</label>
</div>
</p>

```

And the CSS

```
#wrapper{
float:left;
}

.hint{
padding-left:20px;
}

```

Hope this helps