html - この div ラップのテキストを作成するにはどうすればよいですか?

Question

次のような単純な HTML 構造があります。

<div class="container">
    <div class="caption">
        <div class="title">This is a very, very long title!!!</div>
        <div class="details">Details</div>
    </div>
    <div class="content"></div>
</div>

私はこれを非常に簡単にスタイルしました：

.container {
    min-width: 200px;
}
.caption {
    overflow: hidden;
}
.title {
    float: left;
}
.details {
    float: right;
}
.content {
    height: 200px;
    background-color: #c0c0c0;
}

次のようになります。

ウィンドウを十分に縮小すると、最終的に「詳細」div が次の行に折り返されます。

私がしたいのは、「タイトル」div内のテキストを次の行に折り返すことですが、「タイトル」と「詳細」の両方を同じ行に保持します(折り返しません)。

何かのようなもの：

This is a very, very         Details
long title!!!
+----------------------------------+

ウィンドウのサイズが変更されると、タイトルが一度だけ折り返されるため、十分なスペースがありません。

これを達成するための正しい方向に誰かが私を向けることができますか?

興味のある方は、上記のコードの jsFiddle をご覧ください。

編集: 明確にするために、可能であれば .title の固定幅を指定したくありません。ほとんどの場合、この div を必要なだけ広くしたいと思います。