autoprefixer

HTML

<script src="https://rawgithub.com/ai/autoprefixer-rails/master/vendor/autoprefixer.js"></script>
<div class="container">
    <div></div>
    <div><div></div><div></div></div>
    <div></div>
 </div>
<div>
    <textarea id="input"></textarea>
    <textarea id="output">/* Autoprefixer generated code */</textarea>
</div>

SCSS

* { -moz-box-sizing: border-box; box-sizing: border-box }
html, body { width: 100%; height: 100% }
//div { display: flex; height: 100% }
//div > * { flex: auto; border: none; padding: 1em; font-family: Consolas, monospace; resize: none }
#input { background-color: pink }
#output { background-color: silver }

.container {
  display:flex;
  flex-direction:row;
  flex-wrap:wrap;
  height:100vh;
  margin:.5rem;
  padding:0;

   > div { flex:auto;margin: 1rem;}
   > div:nth-child(1) {background-color: red; position: sticky }
   > div:nth-child(2) {background-color: green}
   > div:nth-child(3) {background-color: yellow}
   
   > div:nth-child(2) {
     flex-basis:420px;
     display:flex;
     flex-direction:column;
     flex-wrap:wrap;
     height:50vh;
     /*margin:1em;
     padding:0;*/
     > div {height:32px; height:32px;}
     > div:nth-child(1) {background-color: blue;flex:1}
     > div:nth-child(2) {background-color: red;}
     }
}

JavaScript

var input = document.querySelector('#input');
var output = document.querySelector('#output');

input.addEventListener('keyup', function () {
    var source = this.value;
    var compiled = autoprefixer().process(source);    
    output.value = compiled.css;
});

// clear input on initial focus
var clear = false;
input.addEventListener('focus', function () {
    if (!clear) {
        input.value = '';
        clear = true;
    }
});