Выровняйте по вертикали кнопки в таблице с изменяющимся размером текста выше (используя загрузочную сетку)

Question

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

Этот веб-сайт (https://joinhomebase.com/homebase-pricing/) показывает 4 кнопки, которые перемещаются вниз, как только вы сужаете браузер, и они остаются всегда вертикально выровненными. В то же время текст выше оборачивается на 3 или 4 строки. это именно то, чего я хочу достичь, но, анализируя информацию инструментов разработчика, я не смог выяснить, какой параметр CSS имеет значение.

Я использую Bootstrap Grid только с 1 строкой, чтобы столбцы располагались друг над другом, когда экран очень узкий. Я также использую ReactJS, но это IMO не имеет отношения к этому вопросу.

#pricing-table {
  margin: 0 0 2em 0;
}

#pricing-header {
  text-align: center;
  margin: 20px 0 40px;
  background-color: #64B1BC;
  padding: 0.5em 0 0.5em;
  color: white;
  font-size: 35pt;
  font-weight: normal;
  font-family: Raleway, Arial, sans-serif;
}

.pricing-col-title {
  color: black;
  font-size: 18pt;
  font-weight: 400;
  padding: 0.5em 0 0.5em 0;
  margin: 0;
  border-bottom: 1px solid #021a40;
}

.pricing-col {
  margin: 0;
  padding: 0 0 1em;
  border-left: 1px solid #021a40;
  border-top: 1px solid #021a40;
  border-bottom: 1px solid #021a40;
  text-align: center;
}

.pricing-row {
  margin: 0;
  padding: 0;
  border-right: 1px solid #021a40;
}

.pricing-col-adtext-container {
  min-height: 90px; //does not work when making browser narrower
  //height: 90px;     //creates overlapping text
}

.pricing-col-adtext {
  color: black;
  font-size: 14pt;
  padding: 0.5em;
  font-weight: normal;
  font-family: Raleway, Arial, sans-serif;
  text-align: center;
}

.pricing-col-price {
  color: black;
  font-size: 18pt;
  padding: 0;
  font-weight: bold;
  font-family: Raleway, Arial, sans-serif;
  text-align: center;
}

.pricing-btn-signup-container {
  border-bottom: 1px solid black;
}

.pricing-btn-signup {
  display: block;
  margin: 0 auto 0.5em;
  width: 200px;
  height: auto;
  text-align: center;
  background-color: #f9b200;
  border-radius: 0;
  border: 0;
  color: #000000;
  font-size: 18px;
  font-family: Raleway, Arial, sans-serif;
  font-weight: 500;
}

.pricing-col-feature {
  color: black;
  font-size: 14pt;
  padding: 1em 1em 0;
  font-weight: normal;
  font-family: Raleway, Arial, sans-serif;
  text-align: left;
  margin-left: 1em;
}

<div id="pricing-table" className="container">
  <div>
    <h1 id="pricing-header">Pick the plan that's best for you. </h1>
  </div>


  <div className="row pricing-row">

    <div className="col-md-4 pricing-col">
      <h3 className="pricing-col-title">Free</h3>
      <div className="pricing-col-adtext-container">
        <h4 className="pricing-col-adtext">Lorem ipsum dolor sit amet</h4>
      </div>
      <h2 className="pricing-col-price">Free</h2>
      <div className="pricing-btn-signup-container">
        <a role="button" className="btn btn-primary btn-lg pricing-btn-signup" href="">Sign up</a>
      </div>
      <ul className="pricing-col-feature">
        <li>A</li>
        <li>B</li>
        <li>C</li>
      </ul>

    </div>


    <div className="col-md-4 pricing-col">
      <h3 className="pricing-col-title">Standard</h3>
      <div className="pricing-col-adtext-container">
        <h4 className="pricing-col-adtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et.</h4>
      </div>
      <h2 className="pricing-col-price">Free</h2>
      <div className="pricing-btn-signup-container">
        <a role="button" className="btn btn-primary btn-lg pricing-btn-signup" href="">Sign up</a>
      </div>

      <ul className="pricing-col-feature">
        <li>A</li>
        <li>B</li>
        <li>C</li>
      </ul>

    </div>

    <div className="col-md-4 pricing-col">
      <h3 className="pricing-col-title">Premium</h3>
      <div className="pricing-col-adtext-container">
        <h4 className="pricing-col-adtext">Lorem ipsum dolor sit amet, consetetur sadipscing elitr.</h4>
      </div>
      <h2 className="pricing-col-price">Free</h2>
      <div className="pricing-btn-signup-container">
        <a role="button" className="btn btn-primary btn-lg pricing-btn-signup" href="">Sign up</a>
      </div>

      <ul className="pricing-col-feature">
        <li>A</li>
        <li>B</li>
        <li>C</li>
      </ul>
    </div>

  </div>


  <div className="container-fluid footer">
    <Footer/>
  </div>

</div>

Помимо описанной проблемы, у моего кода, вероятно, есть недолготы - любые советы приветствуются, я новичок в веб-интерфейсе.

Редактировать: я строю таблицу стилей загрузочных часов (ссылка удалена из этого текста по неизвестным причинам)

Answer 1

.row.is-flex{
    display: flex;
    flex-wrap: wrap;
}
.row.is-flex > [class*='col-'] {
    display: flex;
    flex-direction: column;
}

/*
* And with max cross-browser enabled.
* Nobody should ever write this by hand.
* Use a preprocesser with autoprefixing.
*/
.row.is-flex {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-flex-wrap: wrap;
    -ms-flex-wrap: wrap;
    flex-wrap: wrap;
}

.row.is-flex > [class*='col-'] {
    display: -webkit-box;
    display: -webkit-flex;
    display: -ms-flexbox;
    display: flex;
    -webkit-box-orient: vertical;
    -webkit-box-direction: normal;
    -webkit-flex-direction: column;
    -ms-flex-direction: column;
    flex-direction: column;
}

<div class="container">
  <div class="row is-flex">
    <div class="col-md-4">
      <div class="col-12" style="background: red;">
        <h1>test1</h1>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto ut quae, blanditiis aut sapiente cum recusandae, quasi consequatur quia sint ab debitis similique, nisi temporibus minus maxime distinctio error iure.
      </div>
    </div>
    <div class="col-md-4">
    <div class="col-12" style="background: orange;">
        <h1>test2</h1>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto ut quae, blanditiis aut sapiente cum recusandae, quasi consequatur quia sint ab debitis similique, nisi temporibus minus maxime distinctio error iure.
      recusandae, quasi consequatur quia sint ab debitis similique, nisi temporibus minus maxime distinctio error iure.
      </div>
    </div>
    <div class="col-md-4">
      <div class="col-12" style="background: blue;">
        <h1>test3</h1>
        Lorem ipsum dolor sit amet consectetur adipisicing elit. Architecto ut quae, blanditiis aut sapiente cum recusandae, quasi consequatur quia sint ab debitis similique, nisi temporibus minus maxime distinctio error iure.
      </div>
    </div>
  </div>
</div>

Выше вот что все divы всегда одинаковой высоты codepen

Ниже я написал для вас новый код - кнопка всегда останется внизу.

.outer .inner {
  display: flex;
  flex-direction: column;            /*  stack items vertically  */
}
.outer .inner .button {
  margin-top: auto;                  /*  push button to bottom  */
}


/* styling for this demo only  */
.outer {
  display: flex;
}
.outer .inner {
  width: 33.333%;
  padding: 5px;
  border: 1px dotted red;
}
.outer .inner .header,
.outer .inner .text {
  padding: 10px;
}
.outer .inner .button {
  border: 1px solid gray;
  text-align: center;
}

<div class="outer">
  <div class="inner">
    <div class="header">Header</div>
    <div class="text">Some text</div>
    <div class="button">Button</div>
  </div>
  <div class="inner">
    <div class="header">Header</div>
    <div class="text">Lorem ipsum dolor sit amet consectetur adipisicing elit. Veniam, nobis consequatur illum rem dicta laborum aliquam enim mollitia minima cum accusantium porro provident, nam recusandae tempore in? Dolore, fugit nemo.</div>
    <div class="button">Button</div>
  </div>
  <div class="inner">
    <div class="header">Header</div>
    <div class="text">Some text that is middle middle middle middle long</div>
    <div class="button">Button</div>
  </div>
</div>

здесь новый кодовый блок (кнопка всегда внизу