JSFiddle - React, Tailwind, and code Playground

by leonsaysHi

HTML

<div class="app-product-slider">

  <div class="product-item">
    <div class="product-item--image"></div>
    <p>
      LANCO Pintura Lanco Amarillo Tráfico 3.785 litros (1 galón)
      <br> Código # CT401-4
    </p>
    <button>
    Anadir al carrito
    </button>
  </div>

  <div class="product-item">
    <div class="product-item--image"></div>
    <p>
      LANCO Pintura Lanco Amarillo Tráfico 3.785 litros (1 galón)
      <br> Código # CT401-4
    </p>
    <button>
    Anadir al carrito
    </button>
  </div>

  <div class="product-item">
    <div class="product-item--image"></div>
    <p>
      LANCO Pintura Lanco Amarillo Tráfico 3.785 litros (1 galón)
      <br> Código # CT401-4
      LANCO Pintura Lanco Amarillo Tráfico 3.785 litros (1 galón)
      <br> Código # CT401-4
      LANCO Pintura Lanco Amarillo Tráfico 3.785 litros (1 galón)
      <br> Código # CT401-4
    </p>
    <button>
    Anadir al carrito
    </button>
  </div>
</div>

SCSS

.app-product-slider {
  display: flex;
  
  // !!! make all .product-item the same height
  align-items: stretch;
  
  .product-item {
    flex-grow: 1;
    // deco
    border: solid 3px #CCC;
    background-color: rgba(blue, .5);
    
    // !!! stack .product-item's children verticaly
    display: flex;
    flex-direction: column;    
    
    padding: 1em;
    
    button {
      // !!! push to the buttom of .product-item
      margin-top: auto;
    }
    
    &--image {
      flex-basis: 150px;
      height: 150px;
      background-color: black;
    }
    
  }
}