Here is a snippet of my basic HTML code:
<div class = "row">
<div class = "col-xs-8">
<p>long long long long text that generates a taller column</p>
</div>
<div class = "col-xs-4">
<p>shorter text that generates a shorter column</p>
</div>
</div>
To make the two columns reach the same height, I used the following CSS:
.row{
overflow:hidden;
}
[class*="col-"]{
margin-bottom:-99999px;
padding-bottom:99999px;
}
However, when attempting to use the parent relative and child absolute trick for positioning, I encountered an issue where the inner element <p> wouldn't move down to its parent container <div>.
.col-xs-4{
position:relative;
}
.col-xs-4 p {
position:absolute;
bottom:0;//Even though this setting should move it to the bottom of its 'relative' parent div, it doesn't work as expected.
}
I eventually found a different solution, but I'm curious to understand why the previous approach didn't work. Could Bootstrap's grid system be causing this issue?
While I acknowledge that similar questions may have been asked before, I couldn't find a satisfactory answer. For reference, here is a CodePen example demonstrating my problem:example link