Tengo 2 divisiones anidadas dentro de la externa, que tiene un ancho: 100%. Ambos divs anidados deben estar en una línea y primero deben obtener el tamaño de su contenido:

<div id="#outer" style="width:100%; border:1px">
  <div id="#inner1" style="border:1px; display:inline">
    inner div 1. Some text...
  </div>
  <div id="#inner2" style="width:100%????; border:1px; display:inline">
    inner div 2...
  </div>
</div>

La pregunta es cómo hacer # inner2 div para obtener el resto del espacio horizontal si el ancho de # inner1 div no se especifica y depende de lo que hay dentro.

PD Todos los estilos están en clases separadas en mi caso, aquí puse CSS en atributos de estilo solo para simplificar.

Quiero resultado para trabajar en IE7 + y FF 3.6

En más detalles para mí se ve así:

 <style type="text/css">
.captionText
{
 float:left;
} 

.captionLine
{
 height: 1px;
 background-color:black;
 margin: 0px;
 margin-left: 5px;
 margin-top: 5px;
 border: 0px;
 padding: 0px;
 padding-top: 1px;
}
 </style>
<table style="width:300px;">
<caption width="100%">
     <div class="captionText">Some text</div>
     <div class="captionLine"> </div>
</caption>
     <tr>
           <td>something</td>
     </tr>
</table>

Aquí está la imagen de lo que quiero: