JSFiddle - React, Tailwind, and code Playground

by ChrisStanyon

HTML

<ul>

  <li>
    <img  src="https://dummyimage.com/150x150/000/fff">
    <div>
      <p class="desc">This is some text</p>
      <p class="price">£123.00</p>
      <button>Buy Now</button>  
    </div>
  </li>
  
  <li>
    <img  src="https://dummyimage.com/150x100/000/fff">
    <div>
      <p class="desc">
      This is some longer text
      that spans 2 lines
      </p>
      <p class="price">£123.00</p>
      <button>Buy Now</button>  
    </div>
  </li>

</ul>

CSS

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;

  display: flex;
}

li {
  margin: 0 5px;
  padding: 5px;
  border: 1px solid green;
  max-width: 150px;
  text-align:center;

  display:flex;
  flex-direction: column;
  justify-content: space-between;
}

.desc {
  min-height: 40px;
}