Dynamic widths to divs floating next to each other

Problem

I have two divs, fl-left which is floated left and fl-right which is floated to the right. Both divs does not have fixed widths and both of them needs to be inline.

<div class="wrapper">
<div class="fl-left">Hey diddle diddle the cat and the fiddle.</div>
<div class="fl-right">Btn1 Btn2</div>
</div>

Content on both are dynamic. What I want to do is, When content is added to either fl-left or fl-right they should not break into a second line. They should adjust their widths accordingly.

How can I do this?

JSFiddle if necessary http://jsfiddle.net/MvWJN/

EDIT:

fl-left should have 100% width minus the space taken up by fl-right

When content is added to fl-right, fl-left width should get pushed / adjusted

Problem courtesy of: user3607282

Solution

It's not entirely clear what you are trying to do but display:table-cell would probably be an optimal solution.

JSfiddle Demo

CSS

.fl-left {
    color:red;
}

.fl-right {
    text-align: right;
}

.wrapper {
    display: table;
    margin:10px;
    width:100%;
}
[class*=fl] {
    display:table-cell;
    border:1px solid grey;
}
Solution courtesy of: Paulie_D

Discussion

Add percentage to each fluid box

.fl-left {
    float:left;
    color:red;
    width: 50%;
}

.fl-right {
    float:right;
    width: 50%;
}

.wrapper {
    width:45%;
}

An example : http://jsfiddle.net/MvWJN/1/

Discussion courtesy of: Vangel Tzo

This recipe can be found in it's original form on Stack Over Flow.