JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<body>
	<section>
    	<h3 class="title">Section Title</h3>
        
        <div class="row">
        	
            <article class="col-lg-3 col-sm-6 slide">
            	<div class="slideInner">
            
                    <h5>Students</h5>
                    
                    <h4>Student Story About Students</h4>
                    
                    <p>Pork belly hashtag sriracha pour-over. Crucifix street art Vice wayfarers farm-to-table fixie Pitchfork fap bitters, sriracha sustainable ennui American Apparel disrupt whatever.</p>
                    <a class="more" href="#">More</a>
                                    
                    <img class="img-responsive" src="http://placehold.it/350x250">
                    
                    <div class="clearfix"></div>
                                    
                    <span class="social"><i class="fa fa-twitter fa-2x"></i><i class="fa fa-facebook fa-2x"></i></span>
                    
            	</div>
            </article>
            
            <article class="col-lg-3 col-sm-6 slide">
            	
                <div class="slideInner">
            
                    <h5>People</h5>
                    
                    <h4>People Story</h4>
                    
                    <p>Pork belly hashtag sriracha pour-over. Crucifix street art Vice wayfarers farm-to-table fixie Pitchfork fap bitters, sriracha sustainable ennui American Apparel disrupt whatever.</p>
                    <a class="more" href="#">More</a>
                                    
                    
                    
                    <div class="clearfix"></div>
                                    
                    <span class="social"><i class="fa fa-twitter fa-2x"></i><i class="fa...

CSS

body {
		font-family: 'Source Sans Pro', sans-serif;
	}
	
	section {
		width:90%;
		margin:auto;
		max-width:1200px;
	}
	
	
	
	a:hover {
		text-decoration:none;
	}
	
	
	
	.slide {
		border: 1px solid #ddd;
		background-color:#fff;
		padding-bottom:10px;
		
		
	}
	
	.slide:hover {
		cursor:pointer;
	}
	
	.slideInner {
		padding:20px 10px 30px;
		
	}
	
	h4 {
		font-weight:600;
		font-size: 1.8em;
	}
	
	h5 {
		border-top: 5px solid #CFB87C;
		padding-top:20px;
		color: #888;
	}
	
	p {
		font-size:14px;
		color:#777;
	}
	
	.title {
		border: medium none;
		color: #000;
		font-weight:600;
		margin-bottom:20px;
		
	}
	
	.more {
		font-weight:400;
		float:left;
		margin:5px 0 20px;
		font-size:18px;
		width:100%;
		color:#000;
	}
	
	.more:hover {
		color:#000;
	}
	
	
	
	.slide:hover .more::after {
		color: black;
		margin-left: -45px;
		padding: 5px 5px 5px 60px;
		position: relative;
		transition: all .3s ease 0s;
		z-index: -1;
	}
	
	
	
	
	
	.more:after {
		content: "\f061";
		font-family: FontAwesome;
		background-color: #cfb87c;
		padding: 5px;
		color:#fff;
		margin-left:10px;
		font-size:14px;
		
	}
	
	
	
	.slide:hover {
		box-shadow: 0 0 5px #ddd;
		transform: scale(1.03);
		z-index: 6;
	}
	
	.slideInner img {
		margin: 15px auto;
		float:left;
	}
	
	
	
	i {
		color:#ccc;
		margin: 0 5px;
		float:right;
		font-size:1.6em !important;
	}
	
	.slide:hover i {
		color:#888;
	}
	
	.social {
		position:absolute;
		bottom: 15px;
		right:20px;
	}

JavaScript

$(document).ready(function(){

    
      $('section').each(function(){  
            
            var highestBox = 0;
            $('.slide', this).each(function(){
            
                if($(this).height() > highestBox) 
                   highestBox = $(this).height(); 
            });  
            
            $('.slide',this).height(highestBox);         
        
    	});   
	});