Repositioning Relative Divs Resize

Question

Я пытаюсь развернуть строку со многими относительными позициями Divs. Все они имеют встроенные элементы с разной высотой. Вы можете увидеть его здесь, в моем codepen:

codepen

Как я могу избежать пустого пространства между Nr. 1 (красный) и Nr. 5 (черный), если окно становится меньше, а DIVS перестраиваются во втором ряду? Так что Nr. 5 палочек прямо под Nr.1?

Возможно ли это с помощью CSS?

Благодарим за помощь!

---

HTML

<div class="drag" id="item_1">1</div> 
<div class="drag" id="item_2">2</div> 
<div class="drag" id="item_3">3</div> 
<div class="drag" id="item_4">4</div> 
<div class="drag" id="item_5">5</div> 

---

CSS

.drag { 
    position: relative; 
    display: inline-block; 
} 

#item_1 { 
    background-color: red; 
    width: 300px; 
    height: 300px; 
} 

#item_2 { 
    background-color: blue; 
    width: 300px; 
    height: 400px; 
} 

#item_3 { 
    background-color: green; 
    width: 200px; 
    height: 500px; 
} 

#item_4 { 
    background-color: yellow; 
    width: 300px; 
    height: 300px; 
} 

#item_5 { 
    background-color: black; 
    width: 300px; 
    height: 300px; 
} 

Answer 1

вы должны положить в классе сопротивления этот код

body 
    { 
    margin:0px; 
    padding:0px; 
    } 
    .drag 
    { 
     display: inline-block; 
     float:left; 
     padding:0px; 
     margin:0px; 
    } 

, плавающие между собой друг с другом, очень полезно ...