css control alignment issue - css

Question

I am trying to align label : control, label: control in 2 rows.
But text in my 2nd row moves to little bit right as below image. How can I align label and control in same line for second row also? These are generic forms so I dont want to add any height added to class. Any help would be highly appreciated.
Here is my Code
<div class="editor-label"><label for="DocumentSignature">This is a test label with big text below and below</label></div>
<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-required="The Document Signature Services Request URL field is required." id="DocumentSignature" name="DocumentSignature" type="text" value="">
<span class="field-validation-valid" data-valmsg-for="DocumentSignature" data-valmsg-replace="true"></span></div>
<div class="editor-label"><label for="DealSummary">This is next div text which moved to right</label></div>
<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-required="The Deal Summary Template URL field is required." id="DealSummary" name="DealSummary" type="text" value=""> <span class="field-validation-valid" data-valmsg-for="DealSummary" data-valmsg-replace="true"></span></div>
.editor-label {
max-width: 150px;
font-weight: 200;
font-size: 14pt;
letter-spacing: 0.01em;
line-height: 22pt;
float: left;
display: block;
}
.editor-field {
padding-bottom: 10px;
line-height: 22pt;
font-size: 10pt;
clear: right;
}
.label {
width: 180px;
display: block;
text-align: right;
margin-right: 15px;
}

Answer 1

Please see here for JsFiddle Demo
You have to wrap single row with one parent div and then clear all float at that div.
HTML:
<div class='single_row'>
<div class="editor-label"><label for="DocumentSignature">This is a test label with big text below and below</label></div>
<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-required="The Document Signature Services Request URL field is required." id="DocumentSignature" name="DocumentSignature" type="text" value="" />
<span class="field-validation-valid" data-valmsg-for="DocumentSignature" data-valmsg-replace="true"></span></div>
</div>
<div class='single_row'>
<div class="editor-label"><label for="DealSummary">This is next div text which moved to right</label></div>
<div class="editor-field"><input class="text-box single-line" data-val="true" data-val-required="The Deal Summary Template URL field is required." id="DealSummary" name="DealSummary" type="text" value=""> <span class="field-validation-valid" data-valmsg-for="DealSummary" data-valmsg-replace="true"></span></div>
</div>
CSS:
.editor-label {
max-width: 150px;
font-weight: 200;
font-size: 14pt;
letter-spacing: 0.01em;
line-height: 22pt;
float: left;
display: block;
}
.single_row{ clear:both;}
.editor-field {
padding-bottom: 10px;
line-height: 22pt;
font-size: 10pt;
clear: right;
}
.label {
width: 180px;
display: block;
text-align: right;
margin-right: 15px;
}

Answer 2

Add a container that will contain both .editor-field and .editor-label. Without this, it will be very difficult if not impossible to make then work together.
<div class="editor-element">
<div class="editor-label">...</div>
<div class="editor-field">...</div>
</div>
Make this container "contain" the floated elements, so either add overflow: hidden, some kind of float or clearfix to it:
.editor-element {
overflow: hidden;
}
jsFiddle Demo