Check out the jsfiddle provided: https://jsfiddle.net/q3ob7h1o/1/ Alternatively, you can read the code here:
Code
* {
margin: 0;
padding: 0;
}
ul {
display: -webkit-flex;
display: flex;
-webkit-flex-flow: row wrap;
flex-flow: row wrap;
flex-direction: row;
flex-wrap: wrap;
-webkit-align-content: flex-end;
align-content: flex-end;
}
.tile {
width: 33%;
display: inline-block;
box-sizing: border-box;
position: relative;
}
.content {
background: beige;
}
.footer {
background: teal;
}<ul>
<li class="tile">
<div class="content">
<div class="photo"></div>
<h3>This is some long long long long long long long long long long long long long long long long content</h3>
</div>
<div class="footer">
<input type="submit" />
</div>
</li>
<li class="tile">
<div class="content">
<div class="photo"></div>
<h3>This is some content</h3>
</div>
<div class="footer">
<input type="submit" />
</div>
</li>
<li class="tile">
<div class="content">
<div class="photo"></div>
<h3>This is some content</h3>
</div>
<div class="footer">
<input type="submit" />
</div>
</li>
</ul>Objective
The goal is to align the .footer div to the bottom of each .tile element, ensuring that the footers are in line regardless of the content length within each tile.
Although using position: absolute on the footer could work, it's preferable to avoid it since the footer height may vary.
Attempts have been made to turn .tile into a flexbox and set its direction to column, but this approach didn't yield the desired results. Similarly, transforming each tile into a table-cell also proved ineffective.
The challenge lies in targeting an element within a child of an existing flexbox. Any flexbox properties applied target .tile rather than .footer.
Any assistance would be greatly appreciated :)