Right div with variable width, left div takes remaining width


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 class="div-submit">
        <input type="submit" value="Post">

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


Problem courtesy of: Gabriel Caron L'Écuyer


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


Try using display:table; eg:

background-color: green;

background-color: blue;
opacity: 0.5;

background-color: red;
opacity: 0.5;

Hope this helps!


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.