<div class="pricingdiv">
	<ul class="theplan">
		<li class="title"><b>2nd Place</b><br />Herman Miler</li>
		<li><b>Material:</b> All Mesh</li>
		<li><b>Weight:</b> 55 lbs</li>
		<li><b>Max Weight:</b> 330 lbs</li>
		<li><b>Tilt Degrees:</b> 135</li>
		<li><b>Tilt Degrees:</b> 135</li>
		<li><b>Head Rest:</b> Yes</li>
		<li><a class="pricebutton" href="http://ergonomictrends.com/best-ergonomic-office-chairs-under-300-reviews/" target="_blank" rel="nofollow"><span class="icon-tag"></span> Check Out</a></li>
	</ul>
	<ul class="theplan">
		<li class="title"><b>1st Place</b><br />Argomax Chair</li>
		<li><b>Material:</b> Nylon w/ Breathable Glass Fiber</li>
		<li><b>Weight:</b> 55 lbs</li>
		<li><b>Max Weight:</b> 330 lbs</li>
		<li><b>Head Rest:</b> Yes</li>
    <li><b>Lumbar Support:</b> Yes</li>
		<li><b>Arm Rest:</b> <span class="icon-check"></span></li>
		<li><b>Lumbar Support:</b> <span class="icon-check"></span></li>
    <li><b>Warranty:</b> 30 Days Money Back</li>
		<li><b>Support:</b> 2 Years</li>
		<li><a class="pricebutton" href="http://ergonomictrends.com/best-ergonomic-office-chairs-reviews-buyers-guide/" target="_blank" rel="nofollow"><span class="icon-tag"></span> Check Out</a></li>
		</ul>
	<ul class="theplan">
		<li class="title"><b>3rd Place</b><br />Eurotech Mesh</li>
		<li class="ethighlight"><b>Dimensions:</b> 24.8W x 47.3H</li>
		<li><b>Material:</b> Nylon w/ Breathable Glass Fiber</li>
		<li><b>Weight:</b> 50 lbs</li>
		<li><b>Max Weight:</b> 350 lbs</li>
		<li><b>Head Rest:</b> Yes</li>
		<li><b>Arm Rest:</b> <span class="icon-close"></span></li>
		<li><b>Warranty:</b> 30 Days Money Back</li>
		<li><a class="pricebutton" href="http://ergonomictrends.com/best-ergonomic-office-chairs-under-200-reviews/" target="_blank" rel="nofollow"><span class="icon-tag"></span> Check Out</a></li>
	</ul>
</div>

<p>Responsive, equal height pricing table using a regular UL list and CSS Flexbox. Notice the content of each pricing table is different, but their heights are the same.</p>

.pricingdiv{
  display: flex;
  flex-wrap: wrap;
  font-size: 16px;
  justify-content: center;
  font-family: 'Source Sans Pro', Arial, sans-serif;
}

.pricingdiv ul.theplan{
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  color: black;
  width: 260px; /* width of each table */
  margin-right: 20px; /* spacing between tables */
  margin-bottom: 1em;
  border: 1px solid gray;
  transition: all .5s;
}

.pricingdiv ul.theplan:hover{ /* when mouse hover over pricing table */
  transform: scale(1.05);
  transition: all .5s;
  z-index: 100;
  box-shadow: 0 0 10px gray;
}

.pricingdiv ul.theplan .center{
  margin: 0 auto;
  text-align: center;
}

.pricingdiv ul.theplan img{
  max-width: 80%;
  height: auto;
}

.pricingdiv ul.theplan li{
  padding: 10px 10px;
  position: relative;
  border-bottom: 1px solid #eee;
}

.pricingdiv ul.theplan li.title{
  font-weight: bold;
  text-align: center;
  padding: 30px 10px;
  background: rgb(40, 193, 203);
  color: white;
  box-shadow: 0 -10px 5px rgba(0,0,0,.1) inset;
  text-transform: uppercase;
}

.pricingdiv ul.theplan:nth-of-type(2) li.title{
  background: rgb(249, 111, 118);
  color: white;
}
    
.pricingdiv ul.theplan:nth-of-type(3) li.title{
  background: rgb(210, 117, 251);
  color: white;
}

.pricingdiv ul.theplan li b{
  text-transform: uppercase;
}
.pricingdiv ul.theplan li.title b{
  font-size: 250%;
}

.pricingdiv ul.theplan:last-of-type{ /* remove right margin in very last table */
  margin-right: 0;
}

/*very last LI within each pricing UL */
.pricingdiv ul.theplan li:last-of-type{
  text-align: center;
  margin-top: auto; /*align last LI (price botton li) to the very bottom of UL */
}  

.pricingdiv a.pricebutton{
  background: red;
  text-decoration: none;
  padding: 10px;
  display: inline-block;
  margin: 10px auto;
  border-radius: 5px;
  color: white;
  font-weight: bold;
  border-radius: 5px;
  text-transform: uppercase;
}

@media only screen and (max-width: 600px) {
  .pricingdiv ul.theplan{
    border-radius: 0;
    width: 100%;
    margin-right: 0;
  }
  
  .pricingdiv ul.theplan:hover{
    transform: none;
    box-shadow: none;
  }
  
  .pricingdiv a.pricebutton{
    display: block;
  }
}