Question

I need to group two li elements together, so that if the height of any one li (Field7) in the group increases then the height of other one (Field6) should also increase (not its content: label, input), without affecting the height of other li elements (field1, 9, 10, etc.).

As of now I’ve implemented (see image) as follows:

#fld_grp {
    margin: 5px;
    border: 1px solid #008e9c;
    height: auto;
    overflow: hidden;
    padding-bottom: 10px;
}
#fld_grp div.row {
    display: table-row;
    height: auto;
    overflow: hidden;
}
#fld_grp .hd {
    padding-left: 5px;
    line-height: 25px;
    background: #008e9c;
    color: #FFF;
    font-weight: 500;
    font-size: 14px;
}
#fld_grp ul {
    clear: left;
    list-style-type: none;
    margin: 0;
    padding: 0;
    text-align: left;
    display: table;
}
#fld_grp ul li {
    width: 463px;
    margin: 5px;
    height: auto;
    min-height: 30px;
    float: left;
    list-style: none;
    background: rgba(0, 0, 0, 0.1);
}
#fld_grp ul li.dbl {
    width: 935px;
}
#fld_grp ul li label {
    width: 50%;
    background: rgb(255, 235, 205);
    display: block;
    padding: 5px 10px;
    float: left;
    counter-reset: sub-section;
}
#fld_grp ul li label:before {
    counter-increment: section;
    content: counter(section) ". ";
}
#fld_grp ul li input {
    text-align: start;
    width: 170px;
    height: 20px;
    margin: 2px 15px 0 20px;
    background: none repeat scroll 0 0 transparent;
    border: 1px dashed rgba(255, 228, 196, 0.7);
    cursor: text;
}
#fld_grp ul li input:hover {
    border: 1px solid rgba(255, 228, 196, 0.7);
}
#fld_grp ul li input:focus {
    background: antiquewhite;
    border: 2px solid rgba(127, 255, 212, 0.7);
}

<div id="fld_grp">
    <div class="hd">
        <h3>Field Group1</h3>
    </div>
    <ul>
        <div class="row">
            <li>
                <label>Field1</label>
                <input type="text">
            </li>
            <li>
                <label>Field2</label>
                <input type="text">
            </li>
        </div>
        <div class="row">
            <li>
                <label>Field3</label>
                <input type="text">
            </li>
            <li>
                <label>Field4</label>
                <input type="text">
            </li>
        </div>
        <div class="row">
            <li class="dbl">
                <label>Field5(full field)</label>
                <input type="text">
            </li>
        </div>
        <div class="row">
            <li>
                <label>Field6</label>
                <input type="text">
            </li>
            <li>
                <label>Field7:This Long Label is really very long!</label>
                <input type="text">
            </li>
        </div>
        <div class="row">
            <li>
                <label>Field8</label>
                <input type="text">
            </li>
            <li>
                <label>Field9</label>
                <input type="text">
            </li>
        </div>
        <div class="row">
            <li class="dbl">
                <label>Field10(full field)</label>
                <input type="text">
            </li>
        </div>
    </ul>
</div>

I need to get rid of the warnings Eclipse is giving me about in to make my site W3C-compliant for HTML4.01 standards. Moreover, I’m doomed to make it work on IE7.

After Andrew’s suggestion, here’s CSS that solves the issue:

#fld_grp{
    margin: 5px;
    border: 1px solid #008e9c;
    height:auto;
    overflow: hidden;
    padding-bottom: 10px;
}
#fld_grp .hd{
    padding-left: 5px; 
    line-height: 25px; 
    background: #008e9c; 
    color: #FFF; 
    font-weight: 500; 
    font-size:14px;
    }
#fld_grp ul{
    clear:left;
    list-style-type:none;
    margin:0;
    padding:0;
    text-align:left;
    word-wrap: break-word;
}
#fld_grp ul li{
    width:932px;
    margin: 5px;
    height: auto;
    min-height: 35px;
    float:left;
    list-style:none;
    background: rgba(0,0,0,0.1);
    border:1px dashed #8B4513;
    display:table;
}
#fld_grp ul li > div{
    width:466px;
    background:green;
    display:table-cell;
    height:auto;
    min-height:35px;
    float:left;
}
#fld_grp ul li > div label{
    width: 50%;
    background: rgb(255, 235, 205);
    display: block;
    padding: 8px 10px;
    float:left;
}
#fld_grp ul li > div input{
    text-align: start;
    height: 20px;
    margin: 2px 15px 0 20px;
    background: none repeat scroll 0 0 transparent;
    border: 1px dashed rgba(255, 228, 196, 0.7);
    cursor: text;
}
#fld_grp ul li> div.dbl{
    width: 932px;
}

Result:

Answer 1

Change your markup.

Use an li for each row, and a div for each colum in the row.

<ul>
    <li class="clearfix">
        <div>
            <label>Field1</label>
            <input type="text">
        </div>
        <div>
            <label>Field1</label>
            <input type="text">
        </div>
    </li>
</ul>

You could then float your div’s, and make them 50% to get the two columns.
You would then need to apply a clearfix to your li’s though to force them to wrap the divs