Untitled

dabblet.css

.list {
  display: -webkit-flex;
  display:    -moz-flex;
  display:     -ms-flex;
  display:      -o-flex;
  display:         flex;
  
  -webkit-flex-direction: column;
     -moz-flex-direction: column;
      -ms-flex-direction: column;
       -o-flex-direction: column;
          flex-direction: column;
  
  -webkit-align-items: center;
     -moz-align-items: center;
      -ms-align-items: center;
       -o-align-items: center;
          align-items: center;

  background: #CCFFFF;
  height: 100px;
}

.list div {
  -webkit-flex: 1;
     -moz-flex: 1;
      -ms-flex: 1;
       -o-flex: 1;
          flex: 1;

    background: #CCC;
    margin: 5px;
}

.second {
  -webkit-align-self: flex-end;
     -moz-align-self: flex-end;
      -ms-align-self: flex-end;
       -o-align-self: flex-end;
          align-self: flex-end;
}

dabblet.html

<div class="list">
  <div class="first">First</div>
  <div class="second">Second</div>
  <div class="third">Third</div>
</div>

dabblet.js

// alert('Hello world!');

settings.json

{"view":"split","fontsize":"100","seethrough":"","prefixfree":"","page":"css"}