Как сверстать на чистом HTML и CSS блоки разной высоты?

inline block, flex, grid, column-count.

Но это всё будет костылём. Ищите подходящий вам пример костыля по запросу pure CSS masonry grid. Самый простой способ — flex с flex-direction: column и ограничением по высоте родительского контейнера.

А вообще, используйте JS-плагин для этого и не страдайте ерундой:
https://vestride.github.io/Shuffle/