Bottom aligning div without specifying parent container height - css

Question

I have some html like this
<div class="gRow">
<div class="cell c9 right last">Text</div>
<div class="cell c8 right gCol8">Long text wrapped over multiple lines</div>
<div class="cell c7 right gCol7">Text</div>
</div>
See this fiddle: http://jsfiddle.net/LmZYE/
What I would like is to have the two "Text" div's align to the bottom of the gRow div.
I don't know the height of gRow at render time as the text changes with selected language. I have tried positioning gRow relative and my inner div's absolute, bottom:0 but in vain.
Can I do what I'm trying to do or do I need to know the height of the gRow div?
EDIT: Forgot one thing: I would like to have a right border going all the way from the top to the bottom of gRow.
Thanks in advance!

Answer 1

If you need to do this using divs rather than a table you can use the css for display:table to make your divs respond like a table would:
html
<div class="table">
<div class="row">
<div class="cell c9 right last">Text</div>
<div class="cell c8 right gCol8">Long text wrapped over multiple lines</div>
<div class="cell c7 right gCol7">Text</div>
</div>
</div>
css
.table {display:table; border-right: 1px solid red;}
.row {display:table-row;}
.cell {border-left: 1px solid red; display:table-cell; width:33%;}
Then you can keep adding rows and cells as you please.
You are also able to take advantage of the vertical-align property for if you want to align text to the middle or bottom of the div
http://jsfiddle.net/LmZYE/6/

Answer 2

If I've understood the question right, this is what you're looking for.
HTML
<div class="gRow">
<div class="cell c8 right gCol8">Long text wrapped over multiple lines</div>
<div class="bottomRow">
<div class="cell c9 right last">Text</div>
<div class="cell c7 right gCol7">Text</div>
</div>
</div>
CSS
.gRow {
width:400px;
overflow: hidden;
position: relative;
border: 1px solid #d3d3d3;
padding-bottom: 20px;
}
.bottomRow {
position: absolute;
bottom: 0;
width: 100%;
}
.c7, .c8, .c9 {
width:80px
}
.right {
float: right;
}
.cell {
border-left: 1px solid red;
}