I've searched through open questions but couldn't find a solution.
The code snippet in question looks like this: ...
<div style="some height">
<div style="some width"> .......and so on..
..
<table>
<tr>
<td>
<div id="parentDiv">
<div id="div1">Title Text and description.</div>
<div id="div2">Text+Image button here</div>
</div>
</td>
<td>
..and more columns and rows.
</td>
<Other divs closing>
</table>
</div></div>
I need div2 to always stick to the base of parentDiv, regardless of parentDiv's height.
If I give position:relative to parentDiv and position:absolute to div2, I can't get it to stay at the base of parentDiv.
I require this because if any other TD gets a larger height due to content in div1, I want all text and button images to remain aligned in a row.
P.S. - Due to JS functionality, I can't nest tables inside each other to solve this issue. Is there CSS to address this problem?