Выравнивание кнопок внизу контейнера
Добрый вечер!
Есть блоки с автоматически задающейся длиной по самому длинному блоку.
Как сделать, чтобы кнопки у всех у них прилипли к низу и были на одном уровне? position absolute не канает.

Используйте flexbox:
Установите контейнер как flexbox-контейнер:
.container {
display: flex;
flex-direction: row;
align-items: flex-end;
justify-content: flex-end;
}
Установите кнопки как flexbox-элементы:
.button {
display: flex;
align-items: center;
justify-content: center;
margin: 0 5px;
}
Параметр align-items: flex-end выравнивает кнопки по нижнему краю контейнера, а свойство justify-content: flex-end выравнивает их по правому краю.
Используйте таблицу:
Установите контейнер как таблицу, а блоки как строки таблицы:
.container {
display: table;
table-layout: fixed;
}
.block {
display: table-row;
}
Установите кнопки как ячейки таблицы:
.button {
display: table-cell;
vertical-align: bottom;
}
Свойство vertical-align: bottom выравнивает кнопки по нижнему краю ячеек.
Не пользоваться давно протухшим способом макетирования.
Решение там https://codepen.io/VISTASTER/pen/oNRXQNd
Но я бы в таких случаях сразу переходил на grid + areas. Была бы сложность гораздо меньше.
Универсальный конструктор макета
https://bulletproof-password.web.app/Grid Layout with Cell Spanning.html
Расположить картинку, тексты и кнопки через display: flex; flex-direction: column и дать блоку с текстом flex-grow: 1, чтобы он занимал все свободное пространство