How to stretch an empty element horizontally

I am trying to achieve an effect in HTML + CSS like this

_____________________[           Some Div             ]

The ____ is a border-bottom. The Div to the right of it shouldn't have the border. I want this border to stretch as much as possible, so that together they occupy the width of the parent. I am trying to avoid any fixed spacing layout.

I tried using a table with width:100%:

<table style="width:100%"><tbody><tr>
    <td id="borderDiv"></td>
    <td id="contentDiv">Some Div</td>
</tr><?tbody></table>

The extra space goes to the second td instead of the first one. I also tried floating the content div to the right:

<div>
    <div id="contentDiv" style="float:right">Some Div&开发者_如何学Clt;/div>
    <div id="borderDiv"></div>
</div>

But the div with the border now fills up the entire space of the parent. Couldn't figure out a way to constraint it to the leftover space.

Maybe I'm misunderstanding your question and I know the HTML + CSS purists are going to hate me for this but can't you do the following:

<table style="width: 100%">
  <tr>
    <td style="border-bottom: 1px solid #000; width: 100%">&nbsp;</td>
    <td><nobr>my content</nobr></td>
  </tr>
</table>

If the second column has a specific width that you want you can specify that and remove the <nobr> tags and end up with something like:

<table style="width: 100%">
  <tr>
    <td style="border-bottom: 1px solid #000; width: 100%">&nbsp;</td>
    <td style="width: 200px">my content</td>
  </tr>
</table>

The purist alternative to Brian's solution, using CSS properties:

<table style="width: 100%">
  <tr>
    <td style="border-bottom: 1px solid #000; width: 100%">&nbsp;</td>
    <td style="white-space:nowrap">my content</td>
  </tr>
</table>

<div>
     <div id="contentDiv" style="float:right; width:30%">Some Div</div>
     <div id="borderDiv" style="margin-right: 30%"></div>
</div>

Floats are required to have a width so that's how I'd approach it.

This might work, but need more info about how you are dealing with the height. If it's fixed for example just make the float a bit taller.

<div>
     <div id="contentDiv" style="float:right;background:white;white-space:nowrap></div>
     <div id="borderDiv" style="border-bottom:1px solid black;"></div>
</div>