Links should be in the same line using flexbox

css, flexbox, html

Solution

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>
    <a href="">Link1</a>
  </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>

    <a href="">Link2 </a>
  </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>
    <a href="">Link3</a>
  </div>
</div>

Problem

Original source