Two divs (left, right) in parent, right with fixed width, left fill free space, both in same line. (without position relative/absolute)

I had faced with tricky problem, I need to place two divs in one line (left, right), right must have fixed width, but left must fill free space, in another words: left div must have 100% - X pixels, right div should be X pixels.

Important point: without position relative/absolute hack.

Is there any way to achieve this result. I have tried in many ways but without luck.

here is jsfiddle

Markup

<html>
<head>
    <title></title>
</head>
<body>
    <style>
        .container {
            /* container don't matter */
            width: 500px;
            background-color: bisque;
            height: 50px;
        }

            .container .left {
               /* display: inline-block; */ 
                margin-right: 50px;
                background-color: burlywood;
                height: 50px;
            }

            .container .right {
                float: right;
                background-color: chartreuse;
                width: 50px;
                height: 50px;
            }
    </style>
    <div class="container">
        <div class="left">
            fill free space (100% - right)
        </div>
        <div class="right">
            fixed width
        </div>
    </div>
</body>
</html>

Solution

You could do it like this:

JSFiddle - DEMO

CSS:

.container {
    width: 500px;
    background-color: bisque;
    height: 50px;
    display: table;
}
.container .left {
    background-color: burlywood;
    height: 50px;
    display: table-cell;
    width: 100%;
}
.container .right {
    background-color: chartreuse;
    width: 50px;
    height: 50px;
    display: inline-block;
    vertical-align: text-top;
}