Force the second of two side-by-side block elements to fill the parent?

In designing a data-entry form, I'm finding it difficult to get the second column, "rightcol," in "wrapper" to fill out the remaining space. I succeeded once in getting the child elements to display properly but, using the border-bottom attri开发者_运维技巧bute, the border would extend across the entire width of wrapper.

How can I get "rightcol" to fill out the empty space to the right when the columns are side-by-side?

Below, is a mini scrubbed version of my form. Here's a jsFiddler http://jsfiddle.net/jEfQF/

<style type="text/css">
    ul { margin: 0; padding: 0; }
    li { list-style-type: none; list-style-position: outside; }
    #row { border-bottom: solid 1px #F00; }
    #wrapper { width: 100%; display: inline-block; }
    #leftcol { vertical-align: top; width: 350px; float: left; margin-right: 10px; }
    #rightcol { vertical-align: top; float: left; }
</style>

<ul>
    <li id="row">Row 1: <input type="text"></input></li>
    <li id="wrapper">
        <ul id="leftcol">
            <li id="row">Column A Row 1: <input type="text"></input></li>
            <li id="row">Column A Row 2: <input type="text"></input></li>
        </ul>
        <ul id="rightcol">
            <li id="row">Column B Row 1: <input type="text"></input><br />Here's another line in this row.</li>
            <li id="row">Column B Row 2: <input type="text"></input></li>
            <li id="row">Column B Row 3: <input type="text"></input></li>
        </ul>
    </ul>
    <li id="row">Row 3: <input type="text"></input></li>
    <li id="row">Row 4: <input type="text"></input></li>
    <li id="row">Row 5: <input type="text"></input></li>
</ul>

You can do this by removing the float from the right column and giving it a left margin equal to the width of the left column.

<style type="text/css">
    ul { margin: 0; padding: 0; }
    li { list-style-type: none; list-style-position: outside; }
    #row { border-bottom: solid 1px #F00; }
    #wrapper { width: 100%; display: inline-block; }
    #leftcol { vertical-align: top; width: 350px; float: left; margin-right: 10px; }
    #rightcol { margin-left: 350px; vertical-align: top; }
</style>