Bootstrap Css Button Fixed Position After Text

I am trying to set cards with information in columns. As the texts displayed have different lenghts, I want to fixed the possition of the Learn More button related to the end of th

Solution 1:

.parent {
  display: flex;
  flex-direction: row;
  padding: 10px;
}
.parent.child {
  padding-right: 10px;
  flex-grow: 1;
  width: 33%;
  position:relative;
}
.parent.child.content {
  height: 100%;
  box-shadow: 001em gray;
}
.contentimg{
 background-size:cover;
 width:100%;
}
.contenth3,p{
padding:10px;
}
.contentinput{
position:absolute;
bottom:5px;
margin-left: 35%;
margin-top:10px;
}

<divclass="parent"><divclass="child"><divclass="content"><div><imgsrc="https://www.w3schools.com/html/pic_mountain.jpg"/><h3> test 3</h3><p>text text text text text text text text text text text text text text text text text text text</p></div><div><inputtype="button"value="click" /></div></div></div><divclass="child"><divclass="content"><div><imgsrc="https://www.w3schools.com/html/pic_mountain.jpg"/><h3> test 2</h3><p>text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text text tex </p></div><div><inputtype="button"value="click" /></div></div></div><divclass="child"><divclass="content"><div><imgsrc="https://www.w3schools.com/html/pic_mountain.jpg"/><h3> test 1</h3><p>text text  text text text text text text text text text text tex</p></div><div><inputtype="button"value="click" /></div></div></div></div>

Solution 2:

make the box class with position relative :

.boxClassName{
position:relative
}

then make the button class with the following :

.buttonClassName{
    position:absolute;
    bottom:0;
    }