Equal height columns using Flexbox Grid

Question

I am using Flexbox grid CSS library and building two columns next to each other. I am trying to get these two columns equal in height irrelevant the content there is in them.

I also am trying to get the button always sticking to the bottom of the column.

I am trying to achieve this via flex-grow but still not managing to get them equal.

body {
  background-color: grey;
}

.PricingTableHeader {
  background-color: red;
  padding: 20px;
}

.PricingTableHeader h2 {
  margin-bottom: 0px;
}

.PricingTableContent {
  background-color: #ffffff;
  padding: 20px;
}

.PricingTableContent * {
  padding-bottom: 20px;
}

.seperator {
  border-bottom: 1px solid #e5e5e5;
}

.button {
  background-color: green;
  padding: 10px;
}

<link href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css" rel="stylesheet" />
<div class="wrapper">
  <div class="row center-xs">
    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 center-xs">
      <div class="PricingTable">
        <div class="PricingTableHeader">
          <h2>ABC</h2>

        </div>
        <div class="PricingTableContent">
          <p>Lorem Lorem Lorem</p>
          <p>Lorem Lorem Lorem</p>
          <p>Lorem Lorem Lorem</p>
          <p>Lorem Lorem Lorem</p>
          <p>Lorem Lorem Lorem</p>

          <div class="button">
            Click Here
          </div>
        </div>
      </div>

    </div>

    <div class="col-xs-12 col-sm-1 col-md-1 col-lg-1 center-xs"></div>

    <div class="col-xs-12 col-sm-3 col-md-3 col-lg-3 center-xs">
      <div class="PricingTable">
        <div class="PricingTableHeader">
          <h2>ABC</h2>

        </div>
        <div class="PricingTableContent">
          <p>Lorem Lorem Lorem</p>
          <p>Lorem Lorem Lorem</p>

          <div class="button">
            Click Here
          </div>
        </div>
      </div>

    </div>
  </div>
</div>

Here is also a JSFiddle of the issue. Could anyone guide me to the correct solution of this.

Equal height columns using Flexbox Grid

0 Answers0