How can I make the text of this div wrap?

Question

I have a simple HTML structure that looks like:

<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>

I've styled this very simply:

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

Which looks like:

If I shrink the window enough eventually the "details" div will wrap to the next line:

What I would like to happen is the text inside the "title" div wrap to the next line but keep both "title" and "details" at the same line (not wrapping).

Something like:

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

With the title only wrapping once there isn't enough space as the window is resized.

Can anyone point me in the right direction for achieving this?

Here is a jsFiddle of the above code if anyone is interested.

Edit: To clarify, I'd like to not specify a fixed width for .title if possible. In most cases I'd like to let this div get as wide as it needs.

Answer 1

this should work:

http://jsfiddle.net/KV8UW/

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

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

Answer 2

Use display for your layout:http://jsfiddle.net/3nBDd/15/

.caption {
    display:table;
    width:100%;
}
.title {
    display:table-cell;
    text-align: left;
}
.details {
    display:table-cell;
    text-align right;
}