How to make it so that the button is at the bottom of the blocks?

Question

css

There are three blocks . Each has a different amount of content. How to make it so that the button is at the bottom of these blocks, regardless of their amount of content?

Answer 1

Display:flex blocks, or wrap or direction column, and justify-content or stretch
Internals, except for the button, wrap in a separate div
https://jsfiddle.net/rs4nkcvw/ - implementation

.wrapper {
  display: flex;
  justify-content: space-between;
}
section {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  width: 28%;
  border: 1px solid #999;
  border-radius: 7px;
  padding: 10px;
}
button {
  margin: 10px 10px 0;
}

<div class="wrapper">
<section>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum voluptas quae nulla quis ab, quasi odit autem ex amet. Laborum animi, nobis voluptates sint ipsam.</div>
  <button>кнопка</button>
</section>
<section>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Corporis rerum sed dolore, vitae molestias a, dolores, quisquam voluptatem consequatur illum iusto eveniet laudantium natus cupiditate saepe exercitationem quae itaque dolorum aperiam laboriosam. Debitis cum eveniet veritatis, rem, dolorum commodi! Quia.</div>
  <button>кнопка</button>
</section>
<section>
  <div>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Odio eligendi inventore, doloribus hic!</div>
  <button>кнопка</button>
</section>
</div>

Answer 2

Absolutely position, offset padding-bottom so it doesn't overlap.