<div class="container">
<div class="item">
<div class="image"></div>
<div class="title"></div>
<div class="content">
<span></span>
<span></span>
<span></span>
</div>
<div class="button"></div>
</div>
<div class="item">
<div class="image"></div>
<div class="title"></div>
<div class="content">
<span></span>
<span></span>
<span></span>
<span></span>
<span></span>
</div>
<div class="button"></div>
</div>
<div class="item">
<div class="image"></div>
<div class="title"></div>
<div class="content">
<span></span>
<span></span>
</div>
<div class="button"></div>
</div>
</div>
/*
* Base
*/
* {box-sizing: border-box;}
body {
background: #66c3ee;
}
/*
* Flexbox Goodness
*/
.container {
display: flex;
}
.item {
display: flex;
flex: 1 1 180px;
flex-direction: column;
}
.button {
margin-top: auto;
}
/*
* Module Styles
*/
.container {
left: 50%;
position: absolute;
top: 50%;
transform: translate(-50%,-50%);
margin: 0 auto;
width: 600px;
}
.item {
background: #fafafa;
margin-left: 20px;
padding: 20px;
&:first-child {margin-left: 0;}
}
.image {
background: #666;
height: 80px;
margin: 0 auto 15px;
width: 80px;
}
.title {
background: #999;
height: 20px;
margin: 0 auto 10px;
width: 100px;
}
.content {
margin-bottom: 20px;
> span {
background: #ccc;
display: block;
height: 14px;
margin-bottom: 8px;
&:last-child {margin-bottom: 0;}
}
}
.button {
background: #EF3342;
border-radius: 3px;
height: 34px;
}
View Compiled
This Pen doesn't use any external JavaScript resources.