Table-cell

by Jayna

HTML

<div class="grid">

    <div class="column column1"><div class="box">Column 1.</div></div>

    <div class="column column2">Column 2 is a bit longer. and here is more and more and more information.</div>

    <div class="column column3">Column 3 is longer with lots of text in it.</div>

</div>

CSS

.grid {

  display: table;
    width: 350px;
}

.column {
  border-right: 1px solid #fff;
  display: table-cell;
  background-color: #d4d4d4;
  padding: 20px;
}

.column:last-type {
    border: none;
}

.column1 {width: 50%;}
.column2 {width: 20%;}
.column3 {width: 30%;}