使用Flexbox Grid的等高柱

Question

我正在使用Flexbox grid CSS library并构建彼此相邻的两列。我试图让这两列高度相等，与其中的内容无关。

我也试图让按钮始终贴在柱子的底部。

我正试图通过flex-grow实现这一目标，但仍未设法让它们平等。

＆＃13;

＆＃13;

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;
}

＆＃13;

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

＆＃13;

＆＃13;

＆＃13;

这也是问题的JSFiddle。任何人都可以指导我找到正确的解决方案。