Maximized element inside a container with a sibling

Problem

I have a <div> element on my page, that looks roughly like that: http://jsfiddle.net/vWBqB/2/.
I want <select> element to have maximized width, so it takes all free space in the container with red border.
Setting width: 100% makes its width to be equal to the parent container, disregarding floating element on the left. display: block has no effect at all.
Label: text inside <label> may be changed (via JavaScript).
Is there a way to solve this without setting static width in pixels?

Problem courtesy of: user2052437

Solution

http://jsfiddle.net/vWBqB/4/

.left {
    display: table-cell;
}
.right {
    width: 100%;
    display: table-cell;
}
.right>.select {
    width: 100%;
}
Solution courtesy of: user2052437

Discussion

.left {
    float:left;
    width:20%;

}

.select {

    /* width: 100%; */
    width:80%;
    float:right;
}

Does this solve your problem?

Discussion courtesy of: Mukul Kapoor

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