I'm currently struggling to make the "rightcol" in the "wrapper" of my data-entry form fill the remaining space next to the second column. Despite successfully displaying the child elements properly, whenever I use the border-bottom attribute, the border extends across the entire width of the wrapper.
Is there a way to ensure that "rightcol" fills out the empty space on the right when the columns are positioned side by side?
Below is a simplified version of my form. You can access the code on jsFiddler here.
<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>