DIV structure arrangement for an input field in MVC - html

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.

Answer 2

Here's how I might go about it:
.field-outer {
display: table;
text-align: center;
margin: 20px auto;
}
.field-wrapper {
display: table-row;
text-align: center;
background: pink;
}
.field-wrapper > div {
display: table-cell;
vertical-align: middle;
padding: 6px 8px;
}
.input-control-container,
.field-label-container {
text-align: right;
}
.help-icon-container {
text-align: left;
min-width: 40px;
}
.help-icon-container img {
display: block;
}
<div class="field-outer">
<div class="field-wrapper">
<div class="field-label-container">
<label for="blah">Label</label>
</div>
<div class="input-control-container">
<textarea id="blah">Textarea</textarea>
</div>
<div class="help-icon-container">
<img src="http://placehold.it/40x40" />
<!--help popup handle by JavaScript--->
</div>
</div>
</div>
<div class="field-description-container">Here goes the description</div>
<div class="validation-message-container">#Html.ValidationMessageFor(m => m.Email)</div>

Answer 3

If you don't know the width of your container or want it to auto, you can use display: inline-block;.
Check this layout:
body {
text-align: center;
}
body * { box-sizing: border-box; }
.wrapper, .label-wrap, .input-wrap, .opt-wrap {
display: inline-block;
vertical-align: top;
padding: 5px 10px;
border: 1px solid #ddd;
}
.input-wrap {
width: 240px;
text-align: left;
}
.input-wrap input {
width: 100%;
display: block;
margin-bottom: 10px;
}
p {
padding: 0;
margin: 0;
}
<div class="wrapper">
<div class="label-wrap">
<span>Lorem ipsum</span>
</div>
<div class="input-wrap">
<input type="text" placeholder="Write here...">
<p>Lorem ipsum dolor sit amet</p>
</div>
<div class="opt-wrap">
<span>?</span>
</div>
</div>