JSFiddle - React, Tailwind, and code Playground

by Mike Zavarello

HTML

<div id="team">
			<h1>Our Team</h1>
			<div class="separator2"></div>
			<div class="container-fluid">
				<div class="row">
					  <div class="col-md-6">
						  <div class="member">
							  <h3>Member One</h3>
							  <img src="photos/team-member-1.jpg" alt="Team Member 1">
							  <div class="member_body">
							  	<h5>Position</h5>
								<div class="separator"></div>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br /> Voluptates praesentium nulla cupiditate!</p>
								<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
							  </div>
						  </div>
					  </div>
					  <div class="col-md-5">
						  <div class="member">
							  <h3>Member 2</h3>
							  <img src="photos/team-member-2.jpg" alt="Team Member 2">
							  <div class="member_body">
							  	<h5>Position</h5>
								<div class="separator"></div>
								<p>Lorem ipsum dolor sit amet, consectetur adipisicing elit.<br /> Voluptates praesentium nulla cupiditate!</p>
								<span class="glyphicon glyphicon-envelope" aria-hidden="true"></span>
							  </div>
						  </div>
					  </div>
					  <div class="col-md-1"></div>
				 </div>
			</div>
		</div>

CSS

.member {
	padding:30px;
	text-align:center;
	position:relative;
}

.member img {
	max-width:250px;
	margin:20px auto 0px auto;
}

.member h3 {
	margin:30px 0px;
}

.member_body {
	border:1px solid red;
	max-width:250px;
	overflow:hidden;
	height: 200px;
  margin: 20px auto;
}

.member_body span {
	margin-top:20px;
	font-size:30px;
}