JSFiddle - React, Tailwind, and code Playground

by TemaMix

HTML

<ul>
  <li>
 <h3>Initial Consultation</h3>
 <p class="price"><sup>$</sup>100</p>
 <p class="details">Private health rebates apply.</p>
 <a class="button" href=""><p>Buy Now</p></a>
</li>
  <li>
 <h3>Initial Consultation</h3>
 <p class="price"><sup>$</sup>100</p>
 <p class="details">Private health rebates apply.</p>
 <a class="button" href=""><p>Buy Now</p></a>
</li>
  <li>
 <h3>Initial Consultation</h3>
 <p class="price"><sup>$</sup>100</p>
 <p class="details">Private health rebates apply.</p>
 <a class="button" href=""><p>Buy Now</p></a>
</li>
</ul>

CSS

ul {
 display: flex;
 flex-flow: row wrap;
 justify-content: flex-start;
 border: #000 1px solid
}
p, a, h3 {
    padding: 0;
  margin: 0;
}
li {
  padding: 0;
  margin: 0;
 display: flex;
 flex-flow: column;
  border: #000 1px solid;
  height: 100px
}

.button {
margin-top:auto;
}