让 div 占据另一个 div 后剩余的所有空间

我有两个并排的 div。第一个包含一个可能相当长的文本字段，另一个包含一个很短的数字。

我需要第一个 div 占据所有可用空间，而无需拉伸父级并在必要时进行剪切。 Ant 它应该考虑第二个 div 的宽度。因此，如果文本的长度很短，那么两个 div 应该并排，但如果文本很长，那么第一个将被剪裁，第二个将被一直推到右侧。

这是大概的表格布局：

<div id="container">
    <div id="row">
        <span id="text">Short text</span><span id="value">123</span>
    </div>

    <div id="row">
        <span id="text">A bit longer text</span><span id="value">555</span>
    </div>

    <div id="row">
        <span id="text">A very very very very very very very very long text</span><span id="value">555</span>
    </div>
</div>

以及相应的CSS：

#container {
    border: 1px solid #000000;
    width: 300px;
}

#row {
    display: inline-block;
    border: 1px solid #000077;
    width: 100%;
    clear: both;
}

#text {
    display: inline-block;
    border: 1px solid #007700;
}

#value {
    display: inline-block;
    border: 1px solid #770000;
}

这里有一个jsfiddle http://jsfiddle.net/Tf8WR/说明我需要什么的模板。 应剪掉非常长的文本行，并将 555 放置在同一行的旁边，以便整个结构适合指定的 300px（数字是任意的，它将由现实生活中的其他元素定义，并且事先无法得知） ）。

你可能可以使用display: table (Fiddle http://jsfiddle.net/Tf8WR/4/):

#container {
    display: table;
}

#row {
    display: table-row;
}

#text {
    display: table-cell;
}

#value {
    display: table-cell;
}