Flex

Shows vertical align with Flex

by justinwyllie

HTML

<div id="content">

  <div class="col" id="box1">
    <div id="innerBox1">
      Box 1
    </div>
  </div>


  <div class="col" id="box2">
    <div id="innerBox2">
      Box 2
    </div>
  </div>




</div>

CSS

#content {
  width: 100%;
  display: flex;
  flex-direction: row;
  border: 2px solid #0000ff;
  align-items: flex-end;
}

#content .col
{
  border: 1px solid red;
  width: 25px;
}

#box1 {
  flex-grow: 2;
}

#box2 {
  flex-grow: 1;
}

#innerBox1 {
  height: 100px;
  background-color: #ff0000;
}

#innerBox2 {
  height: 50px;
  background-color: #00ff00;
  
}