Cacher is the code snippet organizer for pro developers

<div class="example">
  <div class="example-card">
    <img class="example-image" src="http://www.jurassicworld.com/media/dinosaurs/dimorphodon/jurassic-world-dimorphodon-share.jpg" alt="" />
    <div class="example-text"> Dimorphodon is one of our park’s pterosaurs, or flying reptiles. It evolved to soar through the Jurassic skies, with large eyes, quick jaws and sharp talons perfect for catching fish—or other prey. </div>
    <div>
     <a  class="example-cta" href="#">Learn More</a>
    </div>
  </div>
  <div class="example-card">
    <img class="example-image" src="http://www.jurassicworld.com/media/dinosaurs/velociraptor/jurassic-world-velociraptor-share.jpg" alt="" />
    <div class="example-text">Safety First! The Velociraptor is our park’s most intelligent dinosaur. Always on the hunt, they are not yet trained for public display.</div>
    <div>
     <a  class="example-cta" href="#">Learn More</a>
    </div>
  </div>
  <div class="example-card">
    <img class="example-image" src="http://www.jurassicworld.com/media/dinosaurs/tyrannosaurus-rex/jurassic-world-tyrannosaurus-rex-share.jpg" alt="" />
    <div class="example-text">Among the largest carnivores to have ever stalked the planet, Tyrannosaurus was one fearsome dinosaur. Tyrannosaurus fossils have shown toothmarks that could have only been made by their own kind, though we’ve never seen a T. rex family feud at Jurassic World!</div>
    <div>
     <a  class="example-cta" href="#">Learn More</a>
    </div>
  </div>
</div

.example {
  display: flex;
}

.example-card {
  width: 31.333%;
  float: left;
  flex-basis: 31.333%;
  display: flex;
  flex-direction: column;
}

.example-text {
  flex-grow: 1;
}

.example {
  margin: 1em 0;
}

.example * {
  box-sizing: border-box;
}

.example-card {
  margin: 0 1%;
  padding: 1em;
  background: #2a547b;
}

.example-image {
  width: 100%;
  height: auto;
  margin-bottom: 1em;
  display: block;
}

.example-text {
  color: white;
  margin-bottom: 1em;
}

.example-cta {
  color: #2a547b;
  background: white;
  text-decoration: none;
  padding: 10px;
  display: inline-block;
}

// ----
// libsass (v3.2.5)
// ----

.example {
  display: flex;
  &-card {
    width: 31.333%;
    float: left;
    flex-basis: 31.333%;
    display: flex;
    flex-direction: column;
  }
  &-image {
  }
  &-text {
    flex-grow: 1;
  }
  &-cta {
  }
}







.example {
  * {
    box-sizing: border-box;
  }
  margin: 1em 0;
  &-card {
    margin: 0 1%;
    padding: 1em;
    background: #2a547b;
  }
  &-image {
    width: 100%;
    height: auto;
    margin-bottom: 1em;
    display: block;
  }
  &-text {
    color: white;
    margin-bottom: 1em;
  }
  &-cta {
    color:  #2a547b;
    background: white;
    text-decoration: none;
    padding: 10px;
    display: inline-block;
  }
}

<div class="example">
  <div class="example-card">
    <img class="example-image" src="http://www.jurassicworld.com/media/dinosaurs/dimorphodon/jurassic-world-dimorphodon-share.jpg" alt="" />
    <div class="example-text"> Dimorphodon is one of our park’s pterosaurs, or flying reptiles. It evolved to soar through the Jurassic skies, with large eyes, quick jaws and sharp talons perfect for catching fish—or other prey. </div>
    <div>
     <a  class="example-cta" href="#">Learn More</a>
    </div>
  </div>
  <div class="example-card">
    <img class="example-image" src="http://www.jurassicworld.com/media/dinosaurs/velociraptor/jurassic-world-velociraptor-share.jpg" alt="" />
    <div class="example-text">Safety First! The Velociraptor is our park’s most intelligent dinosaur. Always on the hunt, they are not yet trained for public display.</div>
    <div>
     <a  class="example-cta" href="#">Learn More</a>
    </div>
  </div>
  <div class="example-card">
    <img class="example-image" src="http://www.jurassicworld.com/media/dinosaurs/tyrannosaurus-rex/jurassic-world-tyrannosaurus-rex-share.jpg" alt="" />
    <div class="example-text">Among the largest carnivores to have ever stalked the planet, Tyrannosaurus was one fearsome dinosaur. Tyrannosaurus fossils have shown toothmarks that could have only been made by their own kind, though we’ve never seen a T. rex family feud at Jurassic World!</div>
    <div>
     <a  class="example-cta" href="#">Learn More</a>
    </div>
  </div>
</div