<div class="container">
<div class="item">
<div class="item__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan nunc id felis cursus</p>
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
</ul>
</div>
</div>
<div class="item">
<div class="item__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan nunc id felis cursus</p>
<ul>
<li>test 1</li>
<li>test 4</li>
<li>test 5</li>
</ul>
</div>
</div>
<div class="item">
<div class="item__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan nunc id felis cursus</p>
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
<li>test 5</li>
<li>test 4</li>
<li>test 5</li>
</ul>
</div>
</div>
<div class="item">
<div class="item__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan nunc id felis cursus</p>
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
<li>test 4</li>
<li>test 5</li>
</ul>
</div>
</div>
<div class="item">
<div class="item__content">
<p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. In accumsan nunc id felis cursus</p>
<ul>
<li>test 1</li>
<li>test 2</li>
<li>test 3</li>
</ul>
</div>
</div>
</div>
html, body {
background-color: #DEDFE1;
}
body {
padding: 8px;
}
.container {
display: flex;
flex-wrap: wrap;
align-items: stretch;
// just to mave more attractive view
max-width: 1280px;
border: 1px solid black;
border-radius: 3px;
}
.item {
box-sizing: border-box;
width: 33%;
padding: 10px;
&__content {
background-color: #CECFD3;
padding: 5px 10px;
height: 100%;
}
}
View Compiled
This Pen doesn't use any external CSS resources.
This Pen doesn't use any external JavaScript resources.