JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <div class="col">
        <div class="content">
             <img src="http://upload.wikimedia.org/wikipedia/commons/1/1b/Square_200x200.png"  />
            <p>
                Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque. 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>
    </div>
    <div class="col">
        <div class="content">
            <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.. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque. Quisque quis orci neque.Lorem ipsum dolor sit amet, conetur adipiscing elit. Quisque quis orci neque....

CSS

html, body {
    width:100%;
    height:100%;
    margin:0;
    padding:0;
}
.content > img{
    vertical-align:top;
    
    
}
#wrapper {
    height: 100%;
    width: 100%;
    margin: 20px auto;
    display:table;
    overflow: hidden;
}
#wrapper > .col {
    display: table-cell;
    width: 30.3%;
    border:1px solid red;
    margin: 0 15px 3px;
    background-color: #fff;
    text-align: center;
    position: relative;
    height: 100%;
    -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);
}
#wrapper > .col > .content {
    padding:0 0 35px;
    height:100%;
    border:1px solid green;
}
.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;
 ...