html - DIV structure arrangement for an input field in MVC -

i'm not ui expert , attempting achieve below structure html. image pretty self explanatory of after.

so far have tried few things unsuccessful , have posted mediocre attempt below. 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 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 javascript--->     </div> 

alright, whipped quick example of how 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>         description text here     </p> </div> 

all set objects in sub-div of .formelement display: inline-block, , set width ~33% of page. then, can align text of label near center, , have <p> @ bottom span 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 <i> example fontawesome icon, don't thrown off that.