Question

All,

I have the following code:

http://jsfiddle.net/k2AMG/7/

I am trying to avoid fixed widths in the CSS and align the divs in this fashion, but am not able to do so:

Your name    Textbox
             Please check the name
Work email   Textbox 
             Email should have a valid format
Job title    Textbox
             Job title should have only alphabets

Any help is appreciated. Thanks

Answer 1

Try it like this:

http://jsfiddle.net/andresilich/k2AMG/11/

::Edit:: fixed demo

::Edit 2:: added CSS and HTML to post for future reference

CSS

.data_item{
   margin-bottom: 20px;
   display: block;
}

label
{
    width: 100px;
    display:inline-block;
}

.left {
    display:inline-block;
    margin-right:5px;
}

.right {
    display:inline-block;
    vertical-align:top;
}

.right span span {
    display:list-item;
    list-style-type:none;
}

Clarification: created two classes to separate the two sides, .left and .right, and added a style to the span of the .instructions div to display as a list-item (so they can displace like a regular html list would, why? Because it is a clean, responsive drop that displaces naturally without the need to add margin or padding that might displace with any other element around and thus less maintenance.).

HTML

<div class="data_item">
    <div class="left">
        <label> Your name </label>
    </div>
    <div class="right">
        <span>
           <input type="text" />
           <span class="instructions">Please check the name</span>
        </span>
    </div>
</div>

<div class="data_item">
    <div class="left">
        <label> Work email </label>
    </div>
    <div class="right">
        <span class="item">
           <input type="text" />
           <span class="instructions">Email should have a valid format</span>
        </span>
    </div>
</div>

<div class="data_item">
    <div class="left">
        <label> Job title </label>
    </div>
    <div class="right">
        <span class="item">
           <input type="text" />
           <span class="instructions">Job title should have only alphabets</span>
        </span>
    </div>
</div>