We would like to know how to align text to bottom.
<!DOCTYPE html>
<html>
<head>
<style type='text/css'>
.holder {<!-- w ww .j av a 2 s . co m-->
display: table;
}
.row {
display: table-row;
}
.row div {
display: table-cell;
width: 50%;
vertical-align: bottom;
border-bottom: 5px solid #FFF;
}
.left {
background: #DDD;
}
.right {
background: #EEE;
}
</style>
</head>
<body>
<div class="holder">
<div class="row">
<div class="left">adsda</div>
<div class="right">Lorem ipsum dolor sit amet, consectetur
adipiscing elit. Duis facilisis, risus ut dapibus rhoncus, neque
dolor pretium velit, et facilisis dui odio quis nunc. Aliquam erat
volutpat. Donec eu enim risus. Nullam congue tristique blandit.
Praesent gravida sem quis mauris suscipit ullamcorper. Vivamus
tincidunt dolor a est fermentum id mollis nulla vulputate. Integer
quis nunc metus. Nam nisl mi, suscipit et mattis non, consequat
vestibulum nisl. Nunc ut eros at justo rutrum accumsan non et
sapien. Aenean rutrum felis sit amet urna ultricies blandit. Aenean
libero arcu, pharetra nec blandit sit amet, sodales vel ante. Nulla
non interdum felis.</div>
</div>
<div class="row">
<div class="left">Integer mollis elit a odio viverra cursus.
Nulla facilisi. Aliquam dapibus eleifend lacinia. Integer ut nunc
Praesent gravida sem quis mauris suscipit ullamcorper. Vivamus
tincidunt dolor a est fermentum id mollis nulla vulputate. Integer
quis nunc metus. Nam nisl mi, suscipit et mattis non, consequat
vestibulum nisl. Nunc ut eros at justo rutrum accumsan non et
sapien. Aenean rutrum felis sit amet urna ultricies blandit. Aenean
sed ligula lacinia mattis. Maecenas semper enim et elit porttitor ut
sollicitudin elit pulvinar.</div>
<div class="right">Integer mollis elit a odio viverra cursus.
Nulla facilisi. Aliquam dapibus eleifend lacinia. Integer ut nunc
sed ligula lacinia mattis. Maecenas semper enim et elit porttitor ut
Praesent gravida sem quis mauris suscipit ullamcorper. Vivamus
tincidunt dolor a est fermentum id mollis nulla vulputate. Integer
quis nunc metus. Nam nisl mi, suscipit et mattis non, consequat
vestibulum nisl. Nunc ut eros at justo rutrum accumsan non et
sapien. Aenean rutrum felis sit amet urna ultricies blandit. Aenean
Praesent gravida sem quis mauris suscipit ullamcorper. Vivamus
tincidunt dolor a est fermentum id mollis nulla vulputate. Integer
quis nunc metus. Nam nisl mi, suscipit et mattis non, consequat
vestibulum nisl. Nunc ut eros at justo rutrum accumsan non et
sapien. Aenean rutrum felis sit amet urna ultricies blandit. Aenean
sollicitudin elit pulvinar.</div>
</div>
<div class="row">
<div class="left">Cras nulla neque, facilisis ac blandit
hendrerit, luctus eget turpis. Aliquam erat volutpat. Aenean ac
Praesent gravida sem quis mauris suscipit ullamcorper. Vivamus
tincidunt dolor a est fermentum id mollis nulla vulputate. Integer
quis nunc metus. Nam nisl mi, suscipit et mattis non, consequat
vestibulum nisl. Nunc ut eros at justo rutrum accumsan non et
sapien. Aenean rutrum felis sit amet urna ultricies blandit. Aenean
Praesent gravida sem quis mauris suscipit ullamcorper. Vivamus
tincidunt dolor a est fermentum id mollis nulla vulputate. Integer
quis nunc metus. Nam nisl mi, suscipit et mattis non, consequat
vestibulum nisl. Nunc ut eros at justo rutrum accumsan non et
sapien. Aenean rutrum felis sit amet urna ultricies blandit. Aenean
turpis non dolor suscipit convallis eleifend id eros. Curabitur
ornare consequat ultrices. Vestibulum ante ipsum primis in faucibus
orci luctus et ultrices posuere cubilia Curae; Duis eleifend rhoncus
pellentesque. Aliquam erat volutpat. Etiam et risus lorem,
consectetur interdum sapien.</div>
<div class="right">sadsadad</div>
</div>
<div class="row">
<div class="left">adsda</div>
<div class="right">sadsadad</div>
</div>
<div class="row">
<div class="left">adsda</div>
<div class="right">sadsadad</div>
</div>
</div>
</body>
</html>
The code above is rendered as follows: