How to set two div relative?

Question

How can I set two divs side by side so that by increasing the height of the second div height of the first div increases simultaneously.

I have tried to make it like this:

#content6 > #product-left{
    width: 355px;
    float: left;
    height: auto;
}
#content6 > #product-left ul li a{
    font-size:12px;
}
#content6 > #divide{
    background: url('../images/nav-btn.jpg') repeat-y;
    float: left;
    height: auto;
    width: 20px;
    position:absolute;
    /* position: fixed; */
    display: block;
    /* margin-left: 9px; */
    /*border: 1px solid;*/
}
#content6 > #content-right{
    float: left;
    width: 655px;
    height: 300px;
    margin-left: 10px;
    /*border: 1px solid;*/
}

Here is html page:

<div id="content6">
        <div id="product-left">
            <ul>
                <li>
                    <a href="#">PTFE COATED FIBERGLASS FABRICS</a>
                </li>
                <li>
                    <a href="#">PTFE COATED FIBERGLASS FARBIC SELF-ADHESIVE</a>
                </li>
                <li>
                    <a href="#">PTFE COATED FIBERGLASS BELTS</a>
                </li>
                <li>
                    <a href="#">PTFE COATED FIBERGLASS OPEN MESH DRYER BELTS</a>
                </li>
                <li>
                    <a href="#">SILICON RUBBER COATED FIBERGLASS FABRIC</a>
                </li>
                <li>
                    <a href="#">HIGH TEMP FIBERGALSS WOVEN-NONWOVEN FILTER BAGS</a> 
                </li>
            </ul>
        </div>
        <div id="divide">

        </div>
        <div id="content-right">

        </div>
    </div>

Please Do the needful.

Answer 1

Display #content6 as a table and it's children containers as table cells:

#content6{
    display:table;
}
#product-left{
    width: 355px;
    height: auto;
    display:table-cell;
    background:#EEE;
}
#divide{
    background: url('../images/nav-btn.jpg') repeat-y;
    height: auto;
    width: 20px;
    display: table-cell;
    background:#F00;
}
#content-right{
    width: 655px;
    height: 300px;
    margin-left: 10px;
    background:#CCC;
    display:table-cell;
}

JSFiddle

Note that since ids should be unique, the immediate descendant CSS selectors are redundant here.