Two column CSS table-like styling with unknown widths

Question

I want to come up with a CSS to do this kind of styling:

|Short Text                31231|
|longlonglonglonglonglo      331|
|ng text                        |

but with my current CSS, this is what happens:

|Short Text                31231|   
|longlonglonglonglonglong text  |    
|                            331|

I am floating left and right as you might expect, and I don't know the width of the right column. Different widths for different rows are possible and accepted, I don't require a global border between left and right column.

I want left to take as much space as possible, without going into right's area.

note: I can't use table because this is an external library and I have to define html row by row.

Answer 1

Set their widths to 50%. Example: http://jsfiddle.net/52R8R/

CSS

.b{
width:50%;
float:left;
}
.c{
width:50%;
float:right;
}

HTML

<div class="b">aaaaaaaaaaaaaaaaaaaa</div>
<div class="c">11111</div>
<div class="b">aaaa</div>
<div class="c">11111</div>

EDIT: taking into consideration your comment this should work:

.c
{
float:right; 
border-style:solid; 
}
.b
{
border-style:solid; 
background-color:blue; 
overflow:hidden; 
}

note: you have tu put your divs with <div class="c"> before b.