html bottom按钮,html - Align button to the bottom (float) - Stack Overflow

I'm trying to align the button in the following image to the bottom, I've tried a lot of tricks but nothing seems to work without breaking it. The button is to take up a fixed space while the textarea is to fill the remaining space. Added codepen example!

Would like a non flexbox answer (ie9+)! Also only LESS as a preprocessor if not vanilla css.

html:

submit

css:

body, html {

margin: 0;

}

.wrapper {

position: fixed;

bottom: 0;

width: 100%;

background: green;

}

.text {

width: 800px;

margin: 0 auto;

background: red;

}

.right {

float: right;

padding-left: 10px;

height: 100%;

background: gray;

}

textarea {

width: 100%;

height: 200px;

box-sizing: border-box;

}

.left {

overflow: auto;

padding: 10px;

}

js:

tinymce.init({

selector: 'textarea',

theme: 'modern',

width: '100%',

height: 50,

autoresize_min_height: 50,

menubar: false, // removes top menubar,

statusbar: false, // removes bottom statusbar

toolbar: 'undo redo | bold italic | link image',

plugins: ['image autoresize'],

automatic_uploads: false,

});