How to align content in different containers using only css

Question

I am trying to build Pricing Tableas below.

Below are my requirements

• The button Get Startedshould be on the same horizontal level.
• Containers should be the same height regardless of the content (the number of points and the length of the description in two versions can vary, as shown).
• These two containers should be stacked one above the other with a low screen width.

here is a minimal snippet of my current solution using JS

findTallest = function () {
  var tallestByGroupNum = {}
  $(".item-contents").each(
    function () {
      var grpNum = $(this).parent().attr('data-group-num');
      // !< instead of > to support undefined values
      if (!($(this).height() < tallestByGroupNum[grpNum] )) {
        tallestByGroupNum[grpNum] = $(this).height();
      }
    }
  );

  $(".item-box").height(
    function () {
      return tallestByGroupNum[$(this).attr('data-group-num')];
    }
  );
};

$(window).resize(findTallest);
findTallest();

/* Put your css in here */

.item-box {
  border: 1px solid red;
}
.pricingCard {
  border: 2px solid red;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<div class="container">
  <div class="col-xs-6 pricingCard">
    <h1>Free</h1>

    <div class="item-box" data-group-num="1">
      <div class="item-contents">
        Long long long long long long long long long long long long long long long long long description
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>

    <div class="item-box" data-group-num="2">
      <div class="item-contents">
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>
  </div>

  <div class="col-xs-6 pricingCard">
    <h1>Premium</h1>

    <div class="item-box" data-group-num="1">
      <div class="item-contents">
        Short description
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>

    <div class="item-box" data-group-num="2">
      <div class="item-contents">
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>
  </div>
</div>

Run codeHide result

To explain the problem, here is a fragment excluding JS code. Please note that the buttons do not align properly as before.

Also the solution suggested in the comments looks like just that.

/* Put your css in here */

.item-box {
  border: 1px solid red;
}
.pricingCard {
  border: 2px solid red;
  text-align: center;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>



<div class="container">
  <div class="col-xs-6 pricingCard">
    <h1>Free</h1>

    <div class="item-box" data-group-num="1">
      <div class="item-contents">
        Long long long long long long long long long long long long long long long long long description
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>

    <div class="item-box" data-group-num="2">
      <div class="item-contents">
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>
  </div>

  <div class="col-xs-6 pricingCard">
    <h1>Premium</h1>

    <div class="item-box" data-group-num="1">
      <div class="item-contents">
        Short description
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>

    <div class="item-box" data-group-num="2">
      <div class="item-contents">
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
        <div>Point</div>
      </div>
    </div>

    <button class="btn btn-primary">Get Started</button>
  </div>
</div>

Run codeHide result

Again for emphasis on the issue here is a comparison  

javascript . , .

plnkr - JS.

css ( ).

Answer 1

flexbox - :

* {
  box-sizing: border-box;
}

.pricing {
  background: #eee;
  display: flex;
  flex-direction: column;
  padding: 2em 0;
}
@media (min-width: 48em) {
  .pricing {
    flex-direction: row;
    flex-wrap: wrap;
  }
}
.pricing .block {
  display: flex;
  justify-content: center;
  flex: 1 1 50%;
}
@media (max-width: 48em) {
  .pricing .block {
    flex: 1;
  }
  .pricing .block:nth-child(odd) {
    order: -1;
  }
  .pricing .block:nth-child(2) {
    margin-top: 2em;
  }
}
.pricing header,
.pricing ul {
  background-color: white;
  box-shadow: 0 0 0 1px silver;
  padding: 1em;
  width: 80%;
}
.pricing header {
  display: flex;
  flex-direction: column;
}
.pricing button {
  margin-top: auto;
}

ul {
  margin: 0;
}
ul li {
  margin-left: 1em;
}

h1,
h2 {
  margin: 0.125em 0;
}

button {
  font: inherit;
}

<div class="pricing">
  <div class="block">
    <header>
      <h1>Free</h1>
      <h2>0$</h2>
      <p>short description</p>
      <button>Get Started</button>
    </header>
  </div>
  <div class="block">
    <header>
      <h1>Premium</h1>
      <h2>5$</h2>
      <p>long description long description long description long description long description long description</p>
      <button>Get Started</button>
    </header>
  </div>
  <div class="block">
    <ul>
      <li>Point 1</li>
      <li>Point 2</li>
      <li>Point 3</li>
    </ul>
  </div>
  <div class="block">
    <ul>
      <li>Point 1</li>
      <li>Point 2</li>
      <li>Point 3</li>
      <li>Point 4</li>
      <li>Point 5</li>
      <li>Point 6</li>
      <li>Point 7</li>
    </ul>
  </div>
</div>

Hide result

Answer 2

css, bootstrap, , , . html - , - , divs row, divs row. . - , . hidden-md html. , , css.

, , jsfiddle - , , .