JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/flexboxgrid/6.3.1/flexboxgrid.min.css">
<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>

CSS

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