Append multiple child div to parent div

I want to append all the child divs to the bottom of parent div. Here is my code so far:

.valign {

  display: inline-block;

  width: 100%;

  position: relative;

}

.block {

  display: inline-block;

  max-width: 75%;

}

.red {

  float: left;

  padding: 10px;

  background-color: red;

}

.yellow {

  float: left;

  padding: 10px;

  background-color: yellow;

}

.green {

  float: left;

  padding: 10px;

  background-color: green;

}

<div class="valign">
  <div>
    <div class="block red">my bottom aligned div 1</div>
    <div class="block yellow">my bottom aligned div 2</div>
    <div class="block green">my bottom aligned div 3</div>
  </div>
</div>

jsBin: http://jsbin.com/bahasotofo/edit?html,css,js,output

I've gone through multiple suggestions for the same question but I couldn't find a solution.