Как выровнять кнопки независимо от того, как меняется содержимое предыдущих элементов?

Question

Мне нужно выровнять некоторые кнопки независимо от того, как изменяется содержимое предыдущих элементов. Это - это разметка, которая у меня сейчас есть.

В настоящее время кнопки внизу не выровнены, как показано на следующем рисунке:

Обратите внимание, что кнопки REQUEST DEMO не выровнены должным образом, поэтому я хочу, чтобы содержимое любого предыдущего элемента p было выровнено, как показано на следующем рисунке:

Обратите внимание, что здесь я использовал один и тот же текст, чтобы он выглядел выровненным, но я хочу, чтобы кнопки были выровнены независимо от содержания текста.

Мне также нужно, чтобы эта функция была отзывчивой, так как я использую загрузчик и для небольших экранов он показывает два элемента или один элемент в строке.

Я думал добавить min-height или max-height в CSS, но это не решило мою проблему.

Answer 1

Добавьте этот класс .btn-box к кнопкам и этот класс .padbot к полю

CSS

.btn-box{
  position: absolute;
  bottom: 0;
  left: 50%;
  transform: translateX(-50%)
}

.padbot{
  padding-bottom: 80px; // Adjust as your needs
}

ДЕМО ЗДЕСЬ

Answer 2

Добавьте это к своему коду и посмотрите, ищите ли вы это.

Документация для flexbox

.row {
  display: -webkit-flex; 
  display: -ms-flexbox; 
  display: flex; 
  overflow: hidden;
}

.col-md-6 {
  flex: 1; 
  margin-right: 10px; 
  padding: 50px;
}

.btn {
  position: absolute;
  left: 50%;
  bottom: 0;
  transform: translateX(-50%);
}

Answer 3

Есть несколько способов сделать это.Самым простым способом было бы использовать flexbox, вот пример фрагмента https://codepen.io/imohkay/pen/gpard

.parent {
    display: flex;
    justify-content: space-between;
}

Еще один способ сделать это - установить фиксированную высоту для каждого столбца и установить абсолютную позицию кнопки снизу и, возможно, добавитьнекоторые отступы, чтобы текст никогда не перекрывал кнопку.