I was attempting to have multiple columns which always had the same height no matter how much content each one had. I just started learning about display:table from a sitepoint book which gave me the idea of doing it via this method. I usually do floats and what not but I wanted to go a different method with this project. It is starting to turn out that I may have dove too deep into display:table without learning more about it first lol. I might have to redo my entire website.
I tried using the position:relative on both the row and the cell, but only got results from the table. However someone just pointed this out to me as the reason for me never being able to make this work:
The effect of 'position:relative' on table-row-group, table-header-group, table-footer-group, table-row, table-column-group, table-column, table-cell, and table-caption elements is undefined.
Someone recommended the following which seemed to work except when varied content is placed in cells, it doesn't properly place the link at the bottom:
on P apply this position: relative; float: right;bottom: -20px; as
<p style="text-align: right; position: relative; float: right;bottom: -20px;">
<span class="button-wrapper"><span class="button-l"> </span>
<span class="button-r"> </span>
<a class="button button" href="#">Learn More</a></span> <br>
As can be seen here: