DIV structure arrangement for an input field in MVC

Question

I'm not a UI expert and attempting to achieve the below structure with html. the image is pretty much self explanatory of what i am after.

so far i have tried a few things but was unsuccessful and i have posted my mediocre attempt below. any help would be greatly appreciated.

<style>
    .field-wrapper{

    }
    .input-control-container
    {

    }
    .validation-message-container
    {

    }
    .help-icon-container
    {

    }
    .field-description-container
    {

    }
</style>
<div class="filed-wrapper">
    <div class="field-label-container">
        @Html.LabelFor(m => m.Email)
    </div>
    <div class="input-control-container">
        @Html.TextBoxFor(m => m.Email)
        <div class="field-description-container">
            Here goes the description
        </div>
    </div>
    <div class="validation-message-container">
        @Html.ValidationMessageFor(m => m.Email)
    </div>

    <div class="help-icon-container">
        <img src="/help-icon.png" /> <!--help popup handle by JavaScript--->
    </div>

Answer 1

Alright, I whipped up a quick example of how to do this on JSFiddle.

HTML

<div class="FormElement">
    <div>
        <label for="test">Feild Label</label>
        <input type="text" id="test" name="test" placeholder="Feild Input" />
        <i class="fa fa-question">Icon</i>
    </div>
    <p>
        Some description text here
    </p>
</div>

All I do is set all the objects in the sub-div of .FormElement to display: inline-block, and set their width to all be ~33% of the page. Then, I can align the text of the label to be near the center, and have a <p> at the bottom span the full width.

CSS

.FormElement label,
.FormElement input,
.FormElement i.fa
{
    display: inline-block;
    width: 32%;
}

.FormElement label
{
    text-align: right;
    padding: 0 0 10px 0;
}

.FormElement p
{
    text-align: center;
}

Note

The fa fa-question in the <i> is an example FontAwesome icon, so don't be thrown off by that.