How to make this 2 column table without using tables?

Question

http://jsfiddle.net/pkLMC/

the left column should shrink to fit, and the right column should take up the remainder of the width of the page. It needs to work with IE7 as well

image of issue

<style>
table
{
    width:100%;
    border:1px solid black;
}
td
{
    vertical-align:top;
    border:1px solid green;
    background-color:orange;
}
.left
{
    /* trim the column to the minimum necessary width required to avoid overflow */
    width:1px;
}
.long
{
    /* this layout works whether the content of the right column wraps or not */
    /* display:none; */
}
</style>

<table>
<tr><td class="left">ABC</td><td>Lorem ipsum dolor</td></tr>
<tr><td class="left">ABCDE</td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua.</td></tr>
<tr class="long"><td class="left">ABCDEFG</td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td></tr>
<tr class="long"><td class="left">ABCDEFGHI</td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td></tr>
<tr class="long"><td class="left">ABCDEFGHIJK</td><td>Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum</td></tr>
</table>

Answer 1

The data you present in your example is tabular in nature in that it has both rows and columns. Css without HTML tables is good for formatting stuff in columns (like a newspaper). Once you have both rows and columns with variable width columns (like your data), tables (/table, /tr, /td, etc.) is the way to go.

You might want to stripe your rows. Here is an example: http://jsfiddle.net/peavU/

Answer 2

Something to keep in mind is that using tables for layout is not a bad thing at all IF the information you're presenting is tabular in nature.

Using tables to arrange non-tabular data isn't good, but that doesn't mean that tables don't have their place.

On preview... what @DwB said.