JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
          <div class="col">
            <div class="content"> <img src="http://www.gayot.com/blog/wp-content/uploads/2010/02/crystals-300x160.jpg">
              <h3>Classics - Rnb - Reggae - Rare Groove - Revival</h3>
              <!-- CUSTOM LIST -->
              <div class="custom-list info-box-inner-list">
                <ul>
                  <li>Tuesday 31st December 2013</li>
                  <li>The 4* Holiday Inn Hotel</li>
                  <li>London WC1N 1HT,</li>
                  <li>pop, dance, disco, electronic</li>
                </ul>
              </div>
              <!-- END CUSTOM LIST -->
              <p>Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.LAST WORD</p>
              <div class="btn-align-bottom"> <a href="#" class="button moreinfo">More Info...</a> </div>
            </div>
          </div>
          <div class="col">
            <div class="content"> <img src="http://www.gayot.com/blog/wp-content/uploads/2010/02/crystals-300x160.jpg">
              <h3>Classics - Rnb - Reggae - Rare Groove - Revival</h3>
              <!-- CUSTOM LIST -->
              <div class="custom-list info-box-inner-list">
                <ul>
                  <li>Tuesday 31st December 2013</li>
                  <li>The 4* Holiday Inn Hotel</li>
                  <li>London WC1N 1HT,</li>
                  <li>pop, dance, disco, electronic</li>
                </ul>
              </div>
              <!-- END CUSTOM LIST -->
              <p>Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque..Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque..</p>
              <div class="btn-align-bottom"> <a href="#" class="button moreinfo">More Info...</a> </div>
            </div>
 ...

CSS

.content > img {
	vertical-align:top;
}
#wrapper {
	height: 100%;
	width: 100%;
	margin: 20px auto;
	display:table;
	overflow: hidden;
    border-spacing: 30px;
}
#wrapper > .col {
	display: table-cell;
	width: 30.3%;
	margin: 0 15px 3px;
	background-color: #fff;
	text-align: center;
	position: relative;
	height: 100%;
	padding-bottom: 2px;
	border:1px solid #000;
}
#wrapper > .col > .content {
	padding:0 0 35px;
	height:100%;
}
.content {
	margin-bottom:30px;
	position: relative;
}
.content > p {
	vertical-align:top;
}
.content h3 {
	font-size:1.375rem;
	font-weight:400;
	text-align:center;
	margin-bottom: 20px;
	padding: 25px 27px 0;
}
.content p {
	text-align:left;
	padding: 0 27px 30px;
}
.button.moreinfo {
	margin-top: 5px;
	margin-bottom: 0;
	padding-top: 0.5rem;
	padding-right: 0.3rem;
	padding-bottom: 0.5rem;
	padding-left: 0.3rem;
	background-color: #2a2a2a;
	font-size: 0.9rem;
	color: #f39c12;
	font-weight: 400 !important;
}
div.btn-align-bottom {
	position:absolute;
	bottom:50px;
	left:0;
	right:0;
}
.info-box {
	margin-bottom:0;
	margin-top: 15px;
}
.info-box img {
	max-width: 100%;
	max-height: 100%;
	vertical-align: middle;
}
.info-box-inner {
	background: #FFF;
	padding:25px 27px 35px;
	display:inline-block;
	overflow:hidden;
	float:none;
	min-height:270px;
	text-align:center;
	-moz-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
	-webkit-box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
	box-shadow: 0px 1px 2px rgba(48, 48, 48, 0.3);
	z-index:1;
}
.info-box-inner p {
	text-align:left;
}
.info-box-inner h3 {
	font-size:1.375rem;
	font-weight:400;
	text-align:center;
}