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: 
Thanks for the replies.

First method with CSS table elements worked but too confusing.

So I ended up just placing upperLabel elements in a wrapper and then -> display: block; on those.

Then just added margin to .hint.

So.. 

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

<p class="form-registerUserName">

    <div class="upperLabel">
        <label for="registerUserName">User Name</label>
        <span class="required">*</span>
    </div>

    <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>

```

CSS..

```
.upperLabel {
    display: block;
}

.hint {
    margin-left: 12px;
    color: red;
}

```

I know this is very basic.

Thanks all for the help.
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