Align div top/bottom in a variable height td
===

I am using the HTML below:
I have a table with variable height. The height is set by the first TD content.
In the next TDs i want to have 2 divs. one align top and the other align bottom.

It doesnt seems to work since the 2nd and 3rd TDs have no explicit height.

I am looking for a pure HTML/CSS solution (without setting the height with JS)

Thanks for your help.

    <html>
    <head>
        <title></title>
    	<style>
    		div { 
    			border: 1px solid red; 
    		}
    		td.top {
    			position: absolute;
    		}
    		td.top div.a {
    			position: relative;
    			top: 0;
    		}
    		td.top div.b {
    			position: relative;
    			bottom: 0;
    		}
    		
    	</style>
    </head>
    <body>
    	<table border="1">
    		<tr>
    			<td><div>aasd asdas dasd<br />asd asdasdb<br />asd asdc<br /></div></td>
    			<td class="container"><div class="a">a</div><div class="b">b</div></td>
    			<td class="container"><div class="a">a</div><div class="b">b</div></td>
    		</tr>
    		<tr>
    			<td><div>aasd asdas dasd<br />aasd asdas dasd<br />aasd asdas dasd<br />aasd asdas dasd<br />asd asdasdb<br />asd asdc<br /></div></td>
    			<td class="container"><div class="a">a</div><div class="b">b</div></td>
    			<td class="container"><div class="a">a</div><div class="b">b</div></td>
    		</tr>
    	</table>
    </body>
    </html>

