<div class="container">
<div class="wrapper">
<div>I am item one</div>
<div>I am item two</div>
<div>I am item three and I have a lot more content than the other four items.</div>
<div>I am item four</div>
<div>I am item five</div>
</div>
</div>
* { box-sizing: border-box; }
body {
margin: 0;
padding: 40px;
font: 1.2em 'Open Sans', sans-serif;
background-color: #fff;
}
h1, h2, h3 {
font-family: 'Averia Serif Libre', cursive;
}
.container {
background-color: #ddddda;
height: 720px;
width: 1280px;
padding: 260px 140px;
}
.wrapper {
box-sizing: border-box;
background-color: #fff;
padding: 1em;
display: flex;
flex-wrap: wrap;
gap: 1em 2%;
}
.wrapper > div {
padding: 1em;
background-color: rgb(133,30,62);
color: #fff;
border-radius: 10px;
flex: 0 0 32%;
}
This Pen doesn't use any external JavaScript resources.