SCSS

by khamer

HTML

<div class="cards">
  <div class="cards__card card">
    <h3>Lorem ipsum dolor.</h3>
    <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Aut ipsum officia placeat ducimus quia cupiditate, itaque eligendi culpa eos sapiente.</p>
    <a href="" class="button card__cta">Lorem ipsum dolor sit.</a>
  </div>
  <div class="cards__card card">
    <h3>Velit, suscipit, quisquam!</h3>
    <p>Quidem quo adipisci voluptatem inventore, expedita nostrum vel suscipit eveniet. Dolorum optio eveniet illo, ullam enim soluta voluptatibus minima quo.</p>
    <a href="" class="button card__cta -bottomAttached">Mollitia minima, ipsa voluptas.</a>
  </div>
  <div class="cards__card card">
    <h3>Expedita, mollitia, hic!</h3>
    <p>Assumenda, officia velit aspernatur nulla illo fugit quas tempore soluta, quae, rerum incidunt! Illum id, reiciendis accusantium tempora. Et, vero.</p>
    <a href="" class="button card__cta">Voluptatem impedit ullam.</a>
  </div>
</div>

SCSS

.button {
  background-color: blue;
  text-decoration: none;
  line-height: 2;
  padding: .5rem 1rem;
  color: white;
}

.cards {
  display: flex;
  flex-flow: row nowrap;
  margin: 2rem;
  
  &__card {
    flex-basis: 33%;
  }
  
  &__card:nth-child(n+2) {
    margin-left: 2rem;
  }
}

.card {
  border: 1px solid gray;
  padding: 1rem;
  
  &__cta {

    margin-top: 4rem;
  }
}