My current set up looks something like this:
<tr>
<td>
<div class="blue">...</div>
<div class="yellow">...</div>
</td>
<td>
<div class="blue">...</div>
<div class="yellow">...</div>
</td>
</tr>
If you want to see an example of my current HTML, click here: http://jsfiddle.net/DcRmu/2/
In each <tr>, all <td>s have the same height. My goal is to have the yellow <div>s inside those <td>s align vertically along the bottom of <td>, while the blue <div>s should align vertically along the top. I've attempted setting vertical-align to bottom, but so far it hasn't been successful.
Any suggestions or advice would be greatly appreciated. Thank you!