Esto debería ser fácil ... ¿por qué esto no es fácil?

Estoy buscando tener 2 divs uno al lado del otro, donde un div se ajustará automáticamente al contenido dentro y el segundo simplemente completará el ancho restante. Sin embargo, necesito que el texto en el div 'ancho restante' se trunque si es demasiado grande, ya que solo puedo hacer que estos divs ocupen una línea.

He estado buscando todo el día y lo más cercano que encontré fueest post que sugirió usar tablas que TODAVÍA no solucionó el problema.

Aquí está el código jsfiddle que reproduce mi problema:http: //jsfiddle.net/ssawchenko/gMxWc

¡Espero que alguno de ustedes pueda ayudarme!

=== ¿Solución CSS (Hacky)? ===

Aparentemente, agregar un margen negativo (que debe garantizar que sea lo suficientemente grande como para cubrir el tamaño correcto) "funcionará". Esto parece tan hacky ymay Sin embargo, no solucionó el problema por completo. Si arrastro la ventana jsfiddle de lado a lado para reducir y aumentar los divs, se producen algunas rarezas donde el texto de reducción parece flotar no a la derecha completa.

.right_part 
{
  margin-left:-1000px; 
  background:yellow;   
  float:right;
  white-space:nowrap;
} 

=== Solución CSS completa ===

¡FINALMENTE encontré la combinación CSS correcta!

http: //jsfiddle.net/ssawchenko/gKnuY

Mi error fue que estaba flotando incorrectamente mi contenido "apto para". Al mover el div a la ubicación correcta en el DOM, el contenido se flota correctamente, y el div "tamaño restante" ahora ocupará correctamente el espacio restante.

También quería forzar a los divs a ocupar UNA línea, razón por la cual he establecido un CSS tan estricto en el contenido div de "tamaño restante". desbordamiento: oculto; desbordamiento de texto: puntos suspensivos;