Keep the button at bottom no matter the length of text [duplicate] - html

Question

This question already has answers here:
How can I position my div at the bottom of its container?
(25 answers)
Closed 10 months ago.
I want to keep the button at bottom previously which I was making it possible by writing more text to push it to bottom but it wasn't responsive for every device any way I can keep the button in a div at bottom?
:root {
--clr-primary: #651fff;
--clr-gray: #37474f;
--clr-gray-light: #b0bec5;
}
* {
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
margin: 0;
padding: 0;
}
body {
color: var(--clr-gray);
margin: 2rem;
}
.wrapper-grid {
display: grid;
grid-template-columns: repeat(auto-fit, 20rem);
justify-content: center;
}
.container {
overflow: hidden;
box-shadow: 0px 2px 8px 0px var(--clr-gray-light);
background-color: white;
text-align: center;
border-radius: 1rem;
position: relative;
margin: 2rem 0.5rem;
}
.banner-img {
position: absolute;
background-image: url(https://gaito.000webhostapp.com/im/istockphoto-1307289824-640x640.jpg);
height: 10rem;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.profile-img {
width: 8rem;
clip-path: circle(60px at center);
margin-top: 4.5rem;
height: 8rem;
}
.name {
font-weight: bold;
font-size: 1.5rem;
}
.description {
margin: 1rem 2rem;
font-size: 0.9rem;
}
.btn {
width: 100%;
border: none;
font-size: 1rem;
font-weight: bold;
color: white;
padding: 1rem;
background-color: var(--clr-primary);
}
<div class="wrapper-grid">
<div class="container">
<div class='banner-img'></div>
<img src='https://i.pinimg.com/originals/49/09/f9/4909f9e82c492b1e4d52c2bcd9daaf97.jpg' class="profile-img">
<h1 class="name">Slime</h1>
<p class="description">Slimes also commonly called ooze are common types of</p>
<button class='btn'>Attack this dungeon </button>
</div>
<div class="container">
<div class='banner-img'></div>
<img src='https://static.wikia.nocookie.net/kumo-desu-ga-nani-ka/images/4/4c/Mother_1.png/' alt='profile image' class="profile-img">
<h1 class="name">Gaint spider</h1>
<p class="description">This creature shoots sticky strands of webbing from its abdomen which are most commonly found underground, making their lairs on ceilings or in dark, web-filled crevices.</p>
<button class='btn'>Attack this dungeon </button>
</div>
</div>
Codepen

Answer 1

My solution would be:
.container {
display: flex;
flex-flow: column nowrap; /* Flex everything inside your cards vertically */
}
.description {
flex-grow: 1;
/*
When a card has more space (because another card is taller
with more info) - grow the description
*/
}
Here is a working snippet, click Full page top right to see it working:
:root {
--clr-primary: #651fff;
--clr-gray: #37474f;
--clr-gray-light: #b0bec5;
}
* {
box-sizing: border-box;
font-family: "Open Sans", sans-serif;
margin: 0;
padding: 0;
}
body {
color: var(--clr-gray);
margin: 2rem;
}
.wrapper-grid {
display: grid;
grid-template-columns: repeat(auto-fit, 20rem);
justify-content: center;
}
.container {
overflow: hidden;
display: flex;
flex-flow: column nowrap;
align-items: center;
box-shadow: 0px 2px 8px 0px var(--clr-gray-light);
background-color: white;
text-align: center;
border-radius: 1rem;
position: relative;
margin: 2rem 0.5rem;
}
.banner-img {
position: absolute;
background-image: url(https://gaito.000webhostapp.com/im/istockphoto-1307289824-640x640.jpg);
height: 10rem;
width: 100%;
background-position: center;
background-repeat: no-repeat;
background-size: cover;
}
.profile-img {
width: 8rem;
clip-path: circle(60px at center);
margin-top: 4.5rem;
height: 8rem;
}
.name {
font-weight: bold;
font-size: 1.5rem;
}
.description {
flex-grow: 1;
margin: 1rem 2rem;
font-size: 0.9rem;
}
.btn {
width: 100%;
border: none;
font-size: 1rem;
font-weight: bold;
color: white;
padding: 1rem;
background-color: var(--clr-primary);
}
<div class="wrapper-grid">
<div class="container">
<div class='banner-img'></div>
<img src='https://i.pinimg.com/originals/49/09/f9/4909f9e82c492b1e4d52c2bcd9daaf97.jpg' class="profile-img">
<h1 class="name">Slime</h1>
<p class="description">Slimes also commonly called ooze are common types of</p>
<button class='btn'>Attack this dungeon </button>
</div>
<div class="container">
<div class='banner-img'></div>
<img src='https://static.wikia.nocookie.net/kumo-desu-ga-nani-ka/images/4/4c/Mother_1.png/' alt='profile image' class="profile-img">
<h1 class="name">Gaint spider</h1>
<p class="description">This creature shoots sticky strands of webbing from its abdomen which are most commonly found underground, making their lairs on ceilings or in dark, web-filled crevices.</p>
<button class='btn'>Attack this dungeon </button>
</div>
</div>