Links should be in the same line using flexbox - html

Question

In the below code, I want all the three boxes to have same height and also the links in the three boxes should be in same line as shown in the screenshot below. I have used flexbox for doing this. Please help.
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
align-items: stretch;
padding-top: 35px;
padding-bottom: 35px;
background-color: pink;
}
.wrapper div:not(:last-child) {
border-right: 1px solid #fdfdfd;
}
.wrapper div {
flex-basis: 33%;
text-align: center;
padding: 10px 4%;
}
<div class="wrapper">
<div>
<span>Heading1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link1
</div>
<div>
<span>Heading2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>
Link2
</div>
<div>
<span>Heading3</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link3
</div>
</div>

Answer 1

Remove align-items: flex-start; from the wrapper, give the div display: flex; flex-direction: column;, and set margin-top: auto on the links
.wrapper {
display: flex;
flex-direction: row;
justify-content: space-between;
padding-top: 35px;
padding-bottom: 35px;
background-color: pink;
}
.wrapper div:not(:last-child) {
border-right: 1px solid #fdfdfd;
}
.wrapper div {
flex-basis: 33%;
text-align: center;
padding: 10px 4%;
display: flex; /* added property */
flex-direction: column; /* added property */
}
.wrapper div a { /* added rule */
margin-top: auto;
}
<div class="wrapper">
<div>
<span>Heading1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link1
</div>
<div>
<span>Heading2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>
Link2
</div>
<div>
<span>Heading3</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link3
</div>
</div>

Answer 2

.wrapper {
display: flex;
flex-direction: row;
justify-content: stretch;
padding-top: 35px;
padding-bottom: 35px;
background-color: pink;
}
.wrapper div:not(:last-child) {
border-right: 1px solid #fdfdfd;
}
.wrapper div {
display: flex;
flex-basis: 33%;
flex-direction: column;
justify-content: space-between;
text-align: center;
padding: 10px 4%;
}
.wrapper div a {
flex-grow: 1;
display: flex;
justify-content: center;
align-items: flex-end;
}
<div class="wrapper">
<div>
<span>Heading1</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, scelerisque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link1
</div>
<div>
<span>Heading2</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Praesent erat ex, sceleriit. Vestibulum sodales finibus fausque.sit amet, consectetur adipiscin </p>
Link2
</div>
<div>
<span>Heading3</span>
<p>Lorem ipsum dolor sit amet, consectetur adipiscing . esent erat ex, sceler erat ex, sciit. Vestileriibulum sodales finibus fausque sed pellentesque ut, egestas eget velit. Vestibulum sodales finibus faucibus. </p>
Link3
</div>
</div>