div and textboxes are not aligning at same position when text change

Question

Few hour ago I have asked question that for to align 2 text boxes in line.

But now problem is text boxes are aligned and I have put select list in side of each text box.

but problem is that when I change the label or text before text box all formation disturbed and it's not aligning in same format. I want that whatever the text I write before text box, the position of text box should not change. (ONE TEXT BOX SHOULD BE AT SAME POSITION UNDER ANOTHER ONE)

fiddle demo

code :

.divkl {
    display: inline;
    margin: 20px;
}
.blockl{
    width: 100%;
    display: block;
    padding:3px;
}
.txt_prd_add
{
    width:100px;
    border-radius:0px !important;
    margin-left:10px;
    margin-top:4px;
}
.select_prd
{
    width:85px;
    margin-top:4px;
}

Answer 1

Wrap all of the labels in <label></label> and then apply a fixed width and display: inline-block to the label via CSS. If you want to prevent the elements from wrapping when the browser is resized add white-space: nowrap; to .block1 and .divk1

HTML

<div class="blockl">
    <div class="divkl">
        <label>Material</label>
        <input type="text" class="txt_prd_add">
        <select class="select_prd">
            <option>GB</option>
            <option>MB</option>
            <option>GHz</option>
        </select>
    </div>
    <div class="divkl">
        <label>Color</label>
        <input type="text" class="txt_prd_add">
        <select class="select_prd">
            <option>GB</option>
            <option>MB</option>
            <option>GHz</option>
        </select>
    </div>
</div>
<div class="blockl">
    <div class="divkl">
        <label>Size</label>
        <input type="text" class="txt_prd_add">
        <select class="select_prd">
            <option>GB</option>
            <option>MB</option>
            <option>GHz</option>
        </select>
    </div>
    <div class="divkl">
        <label>Type</label>
        <input type="text" class="txt_prd_add">
        <select class="select_prd">
            <option>GB</option>
            <option>MB</option>
            <option>GHz</option>
        </select>
    </div>
</div>

CSS

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

.divkl {
    display: inline;
margin: 20px;
    white-space: nowrap; /* Prevents wrapping */
}

.blockl{
    width: 100%;
    display: block;
    padding:3px;
    white-space: nowrap; /* Prevents wrapping */

}

JS Fiddle: http://jsfiddle.net/u7aTD/7/