Skip to main content
2 de 5
se añadieron 11 caracteres en el cuerpo
IvanS95
  • 1.2k
  • 8
  • 12

Mira este ejemplo; aqui uso nada mas Flexbox, sin Bootstrap; agregue algunos estilos solo para diferenciar un poco pero puedes modificarlo segun necesites.

* {
  box-sizing: border-box
}

.flex-container {
  display: flex;
  align-items: stretch;
  flex: 1;
  min-height: 450px;
  width: 100%;
}

.flex-item {
  border: 1px solid grey;
  display: flex;
  flex-direction: column;
  flex: 1;
}

.flex-item header {
  background-color: lightblue;
  color: white;
  padding: 15px;
  text-align: center;
}

.flex-item .body {
  flex-grow: 1;
  padding: 15px 25px;
}

.flex-item .action {
  padding: 15px;
  text-align: center;
}
<div class="flex-container">
  <div class="flex-item">
    <header>Item 1</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, r
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 2</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, r
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 3</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
  <div class="flex-item">
    <header>Item 4</header>
    <div class="body">
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
      <p>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Culpa inventore impedit, cum asperiores sequi ab corporis, hic dignissimos magni laborum fugit dolores quibusdam, similique sint odit delectus porro. Ea est odio laborum eligendi, exercitationem
        voluptatem doloremque alias, molestiae rerum reprehenderit inventore, fugiat itaque? Quaerat blanditiis, repellendus omnis harum asperiores voluptate!
      </p>
    </div>
    <div class="action">
      <button>Solicitar</button>
    </div>
  </div>
</div>

IvanS95
  • 1.2k
  • 8
  • 12