Align button to the bottom (float)
<p>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!</p>

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

<p><a href="https://i.stack.imgur.com/tPyr7.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/tPyr7.png" alt="enter image description here"></a></p>

<p>html:</p>

<pre><code>&lt;div class="wrapper"&gt;
  &lt;div class="text"&gt;

    &lt;div class="right"&gt;
      &lt;button&gt;submit&lt;/button&gt;
    &lt;/div&gt;

    &lt;div class="left"&gt;
      &lt;textarea&gt;&lt;/textarea&gt;
    &lt;/div&gt;

  &lt;/div&gt;
&lt;/div&gt;
&lt;script src="//cdn.tinymce.com/4/tinymce.min.js"&gt;&lt;/script&gt;
</code></pre>

<p>css:</p>

<pre><code>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;
}
</code></pre>

<p>js:</p>

<pre><code>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,
});
</code></pre>

<p><a href="http://codepen.io/basickarl/pen/Megjyb" rel="nofollow noreferrer">http://codepen.io/basickarl/pen/Megjyb</a></p>