<div class="grid">
  <div class="grid__item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque dignissimos necessitatibus officia nesciunt sequi in beatae culpa alias odit voluptatibus temporibus sed modi quos neque ipsam sit, veniam, quia possimus.</div>
  <div class="grid__item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque diga alias odit voluptatibus temporibus sed modi quos neque ipsam sit, veniam, quia possimus.</div>
  <div class="grid__item">Lorem ipsum dolor sit, amet consectetur adipisit sequi in beatae culpa alias odit voluptatibus temporibus sed modi quos neque ipsam sit, veniam, quia possimus.</div>
  <div class="grid__item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumqu ficia nesciunt sequi in beatae culpa alias odit voluptatibus temporibus sed modi quos neque ipsam sit, veniam, quia possimus.</div>
  <div class="grid__item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumque dignissimos necessitatibus officia nesciunt sequi in beatae culpa a</div>
  <div class="grid__item">Lorem ipsum dolor sit, amet consectetur adipisicing elit. Cumqu ficia nesciunt sequi in s odit voluptatibus temporibus sed modi quos neque ipsam sit, veniam, quia possimus.</div>
</div>
* {
  box-sizing: border-box;
}

.grid {
  display: flex;
  flex-wrap: wrap;
}

.grid__item {
  width: 33.333%;
  padding: 15px;
  outline: 1px dashed tomato;
}

.grid__item:nth-child(3n - 1) {
  transform: translateY(25px);
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.