How to align contents in different containers using only css

Question

I am trying to build a Pricing Tablesimilar to one shown below.

Following are my requirements

• The Get Started button should be on same horizontal level
• The containers have to be of same height irrespective of the content (The no. of points & length of description in the two can vary as shown)
• These two containers should stack one above other on low screen width

here is a minimum snippet for 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>

To explain the problem, here's the snippet exluding the JS code. Note that the buttons don't align properly as before.

Also the solution suggested in the comments are similar to this only.

/* 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>

Again to emphasis on the problem here's the comparison

Currently I am using javascript to achieve this. I detect the tallest element and then set the height of the parent container to that.

Here the link to the plnkr on my current implmentation is JS.

Can this be done in css alone (using some bootstrap classes).

Answer 1

With flexbox, I'd do something like this:

* {
  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>