Question

I’ve got following auto generated HTML, which I can not change.
This HTML displays the message in em before the input field, however I need to move it to the right side of the input field.

I have tried using float right to the em, but it does not work.
I’ll appreciate any help.

<tr class="form-field">
    <th scope="row">
        <label for="user_email">Email</label>
        <em>Email is required.</em> 
    </th>
    <td>
        <input type="text" value="" id="user_email" name="user_email">
    </td>
</tr>

Answer 1

CSS Only solution (which I don’t recommend, but works)

The jsfiddle: http://jsfiddle.net/rLhTs/

HTML:

<table>
    <tr class="form-field">
        <th scope="row">
            <label for="user_email">Email</label>
            <em>Email is required.</em> 
        </th>
        <td>
            <input type="text" value="" id="user_email" name="user_email">
        </td>
    </tr>
    <tr class="form-field">
        <th scope="row">
            <label for="user_name">Name</label>
            <em>Name is required.</em> 
        </th>
        <td>
            <input type="text" value="" id="name_email" name="name_email">
        </td>
    </tr>
</table>

CSS:

​.form-field:nth-child(1):after { 
    content:"Email is required.";
}

.form-field:nth-child(2):after { 
    content:"Name is required.";
}

​
You’ll just have to declare the :after content for nth-child and you’ll need to know specifically what you’re trying to replace.

This is a JavaScript solution:

Check out this jsFiddle: http://jsfiddle.net/E8dJ9/3/

I’ve expanded it to show you it could work for any number of rows. You may have to refine this a bit depending on your real specific use case.

And the code for completeness:

HTML:

<table>
    <tr class="form-field">
        <th scope="row">
            <label for="user_email">Email</label>
            <em>Email is required.</em> 
        </th>
        <td>
            <input type="text" value="" id="user_email" name="user_email">
        </td>
    </tr>
    <tr class="form-field">
        <th scope="row">
            <label for="user_name">Name</label>
            <em>Name is required.</em> 
        </th>
        <td>
            <input type="text" value="" id="user_name" name="user_name">
        </td>    
    </tr>
</table>

JavaScript (using jQuery):

$('th[scope="row"]').each(function(index, value) {
    var em = $(this).find('em').text();
    $(this).parent().find('td').append('<em>' + em + '</em>');
});​

CSS:

.form-field th em {
    display: none;
}​