Right div with variable width, left div takes remaining width

Problem

I have a div (.container) of variable width containing 2 divs. The right div (.div-submit) is of variable width, depending on the language used. I want the left div (div-textarea) to adjust and take all the remaining space on the left. How can I achieve this without using flexboxes? See code below and this jsfiddle

<div class="container">
    <div class="div-textarea">
        <textarea id="txtarea" placeholder="This  is a textarea"></textarea>
    </div>
    <div class="div-submit">
        <input type="submit" value="Post">
    </div>
</div>

Please note that the right div does not have a fixed width, so solutions like this one does not work.

Thanks.

Problem courtesy of: Gabriel Caron L'Écuyer

Solution

I removed the float:left; from your textarea div and added overflow:hidden;. I have also repositioned the submit div in the HTML so that it is placed before the textarea div. It seems to work fine.

Please see my fiddle

Solution courtesy of: PTD

Discussion

Try using display:table; eg:

.container{
background-color: green;
display:table;
}

.div-textarea{
display:table-cell;
background-color: blue;
opacity: 0.5;
width:100%;
}

.div-submit{
display:table-cell;
background-color: red;
opacity: 0.5;
}

Hope this helps!

*Edit*

Wrap the div-text area and the div-submit with another div and set it's display to display:table-row;

Discussion courtesy of: Ross Wilson

Try this one, if it can help you: JSFiddle

I have changed the widths in % instead of pixels and used text: no-wrap

Discussion courtesy of: Aayushi Jain

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