Плавающие div не складываются должным образом (без пробелов)

Вы можете добавить что-то вроде этого в свой класс .wpr:

    display: flex;
    flex-flow: column wrap;
    max-height: 800px;

Это вроде как хакерство, и я думаю, что для этого требуется максимальная высота. Вы также можете изучить плагин jquery, например https://isotope.metafizzy.co/layout-modes/masonry.html

Вы можете использовать flexbox для заполнения пробелов, чтобы каждая строка имела одинаковую высоту без пробелов:

display: flex;
flex-flow: row wrap;

Рабочий пример:

.wpr {
  padding: 20px;
  display: flex;
  flex-flow: row wrap;
}

.wpr span {
  width: calc(50% - 20px);
  min-height: 130px;
  background: green;
  margin: 10px;
  display: block;
}

<div class = "wpr">
  <span>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar elit vitae lobortis tempor. Ut vitae quam maximus, iaculis lacus ut, volutpat lacus. Donec eget odio vel ligula ullamcorper hendrerit nec et arcu.Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar elit vitae lobortis tempor. Ut vitae quam maximus, iaculis lacus ut, volutpat lacus.</span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
  <span></span>
</div>

Чтобы добиться того, о чем вы просите, вам необходимо создать макет кладки. Вы можете использовать плагин JQuery, как упоминалось выше в @ git-e-up, поскольку это может быть довольно сложно добиться, используя только CSS. Однако, если вам нравится решение на чистом CSS, вы можете найти очень хороший учебник здесь. Согласно этому руководству, ваш HTML-код должен измениться следующим образом:

<div class = "masonry-layout">
    <div class = "masonry-layout__panel">
        <div class = "masonry-layout__panel-content">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar elit 
vitae lobortis tempor. Ut vitae quam maximus, iaculis lacus ut, volutpat 
lacus. Donec eget odio vel ligula ullamcorper hendrerit nec et arcu.Lorem 
ipsum dolor sit amet, consectetur adipiscing elit. Donec pulvinar elit vitae 
lobortis tempor. Ut vitae quam maximus, iaculis lacus ut, volutpat lacus.
        </div>
    </div>
    <div class = "masonry-layout__panel">
        <div class = "masonry-layout__panel-content">
            2
        </div>
    </div>
    <div class = "masonry-layout__panel">
        <div class = "masonry-layout__panel-content">
            3
        </div>
    </div>
    <div class = "masonry-layout__panel">
        <div class = "masonry-layout__panel-content">
            4
        </div>
    </div>  
    <div class = "masonry-layout__panel">
        <div class = "masonry-layout__panel-content">
            5
        </div>
    </div>  
    <div class = "masonry-layout__panel">
        <div class = "masonry-layout__panel-content">
            6
        </div>
    </div>  
    <div class = "masonry-layout__panel">
        <div class = "masonry-layout__panel-content">
            7
        </div>
    </div> 
    <div class = "masonry-layout__panel">
        <div class = "masonry-layout__panel-content">
            8
        </div>
    </div> 
    <div class = "masonry-layout__panel">
        <div class = "masonry-layout__panel-content">
            9
        </div>
    </div> 
    <div class = "masonry-layout__panel">
        <div class = "masonry-layout__panel-content">
            10
        </div>
    </div>
</div>

Обратите внимание, что первоначальная структура .wrp и .span была заменена трехуровневой структурой. Правила CSS должны измениться соответственно на:

.masonry-layout {
    column-width: 270px;
    column-gap: 0;
}
.masonry-layout__panel {
    break-inside: avoid;
    padding: 5px;
}
.masonry-layout__panel-content {
    padding: 20px;
    border-radius: 10px;
    background: green;
    min-height: 130px;
}

Это даст вам следующий макет кладки, который вы можете увидеть на изображении это, и я думаю, это то, что вы ищете! Вы можете проверить приведенный выше код в Codepen.