box-align

by ethertank

HTML

<div>
<p>aaaa<br /> aaaa aaaa aaaa.</p>
</div>

<div>
<p>bbbbb<br />
Hello, world.</p>
</div>

<div>
<p>cccc<br />
cccccc cccc cc<br />
ccccc cccc.</p>
</div>

<div>
<p>ddd<br />
ddddd<br />
dddd</p>
</div>

CSS

html,
body {
    height: 100%;
    margin: 0;
    padding: 0;
    background: #fff;
}

body {
    display: -webkit-box;
    display:    -moz-box;
    display:     -ms-box;
    display:      -o-box;
    display:         box;

    -webkit-box-align: end;
       -moz-box-align: end;
        -ms-box-align: end;
         -o-box-align: end;
            box-align: end;
}

body > div {
    -webkit-box-sizing: border-box;
       -moz-box-sizing: border-box;
        -ms-boz-sizing: border-box;
         -o-box-sizing: border-box;
            box-sizing: border-box;
    width: 140px; padding: 20px;
    background: #000; color: #fff;
}

body > div:nth-child(odd) { background: #555; }