Align div at bottom of flex - html

Question

I have this card:
.do_card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 220px;
height: 320px;
}
.do_container {
padding: 2px 16px;
}
<div class="do_card">
<img src="https://picsum.photos/200/300" style="width:220px;height:150px;margin-left:auto;margin-right:auto;display:block;">
<div class="do_container">
<p style="text-align: center;">Lorem Ipsum</p>
<div style="display: flex; justify-content: space-between;">
<p><i class="test"></i> GET IT
<p>Like</p>
</div>
</div>
</div>
How can I get the "GET IT" and "Like" to always be at the bottom of the card?
Setting the do_card to position: relative; and the div with "Get it" and "Like"
to position: absoulute; bottom:0px; does not work

Answer 1

To make sure the content set to absolute remains within the desired element (card in your case), make sure to set its parent to position: relative; (.do_card in your case)
It does seem to work for me as mentioned in the comment:
<style>
.do_card {
box-shadow: 0 4px 8px 0 rgba(0,0,0,0.2);
transition: 0.3s;
width: 220px;
height: 320px;
position: relative;
}
.do_container {
padding: 2px 16px;
}
</style>
<div class="do_card">
<img src="https://picsum.photos/200/300" style="width:220px;height:150px;margin-left:auto;margin-right:auto;display:block;">
<div class="do_container">
<p style="text-align: center;">Lorem Ipsum</p>
<div style="display: flex; justify-content: space-between; position: absolute; bottom: 0; width: 100%; box-sizing: border-box; padding: 0 16px; left: 0;">
<p><i class="test"></i> GET IT
<p>Like</p>
</div>
</div>
</div>

Answer 2

I would prefer a "non-absolute" solution whenever possible. In fact, you're able to achieve the layout with flexbox. Here's how:
First, you need to put your content inside the card into 2 blocks (top and bottom).
Then, you can use flex-direction: column; and justify-content: space-between; on the card.
.do_card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 220px;
height: 320px;
/* vertical stretched alignment */
display: flex;
flex-direction: column;
justify-content: space-between;
}
.do_card img {
max-width: 100%;
}
.do_container {
padding: 2px 16px;
}
.do_container_bottom {
display: flex;
justify-content: space-between;
align-items: center;
}
<div class="do_card">
<!-- top -->
<div class="do_container">
<img src="https://picsum.photos/200/300" style="width:220px;height:150px;margin-left:auto;margin-right:auto;display:block;">
<p style="text-align: center;">Lorem Ipsum</p>
</div>
<!-- bottom -->
<div class="do_container_bottom">
<i class="test"></i> GET IT
<p>Like</p>
</div>
</div>

Answer 3

if you want button "GET IT" and "Like" to always be at the bottom of the card, you can set do_container to flex_grow: 1 to make it take as much space as possible and set the element inside with justify-content: space-between
.do_card {
box-shadow: 0 4px 8px 0 rgba(0, 0, 0, 0.2);
transition: 0.3s;
width: 220px;
height: 320px;
/* add flex */
display:flex;
flex-direction: column;
}
img {
width:220px;
height:150px;
margin-left:auto;
margin-right:auto;
display:block;
}
.do_container {
padding: 2px 16px;
/* add flex-grow to make it fill the height of the container */
flex-grow: 1;
display: flex;
flex-direction: column;
/* make it space-between to set get_it and like button on bottom of card */
justify-content: space-between;
}
.title {
text-align: center;
}
.action_container {
display: flex;
justify-content: space-between;
}
p {
color:black
}
<div class="do_card">
<img src="https://picsum.photos/200/300">
<div class="do_container">
<p class="title">Lorem Ipsum</p>
<div class="action_container">
<p><i class="test"></i> GET IT
<p>Like</p>
</div>
</div>
</div>