How do I position divs directly below each other?

Question

I would like to position divs directly below each other like so: https://imgur.com/a/ZWKYTNO

Here's what I've done so far: https://jsfiddle.net/6815z9hg/

.block1 {
  background-color: yellow;
  height: 900px;
  width: 500px;
  display: inline-block;
}

.block2 {
  background-color: blue;
  height: 200px;
  width: 500px;
  display: inline-block;
}

.block3 {
  background-color: red;
  height: 400px;
  width: 500px;
  display: inline-block;
}

.block4 {
  background-color: orange;
  height: 700px;
  width: 500px;
  display: inline-block;
}

<div class='block1'></div><div class='block2'></div><div class='block3'></div><div class='block4'></div><div class='block1'></div><div class='block2'></div><div class='block3'></div><div class='block4'></div><div class='block1'></div><div class='block2'></div><div class='block3'></div><div class='block4'></div><div class='block1'></div><div class='block2'></div><div class='block3'></div><div class='block4'></div><div class='block1'></div><div class='block2'></div><div class='block3'></div><div class='block4'></div><div class='block1'></div><div class='block2'></div><div class='block3'></div><div class='block4'></div><div class='block1'></div><div class='block2'></div><div class='block3'></div><div class='block4'></div><div class='block1'></div><div class='block2'></div><div class='block3'></div><div class='block4'></div><div class='block1'></div><div class='block2'></div><div class='block3'></div><div class='block4'></div><div class='block1'></div><div class='block2'></div><div class='block3'></div><div class='block4'></div>