How to group elements dynamically indepente the size?

Question

I have a div parent who is responsible for bringing together certain quantities of children.

The problem is that this div is always aligned to the left, without leaving blank spaces, but each parent div has a different number of child elements.

This causes each parent div to have a different height, and consequently the float: left In some cases it causes an element to be aligned to the right, leaving a huge blank to the left. When there’s no white space on top.

I will illustrate the problem I have with two images:

Problem

Desired solution

Answer 1

try to use the following markup HTML that should work:

#conteudo {
  float: left;
  width: 80%;
  height: 400px:
}
#barra-lateral {
  float: right;
  width: 20%;
  height: 400px;:
}

.item {
  background-color: red;
  display: inline-block;
  margin: 10px;
}

#conteudo .item {
  width: 100px;
  height: 100px;
}

#barra-lateral .item {
  width: 95%;
  height: 95%
}

<div id="conteudo">
  <div class="item">1</div>
  <div class="item">3</div>
  <div class="item">4</div>
  <div class="item">5</div>
</div>
<div id="barra-lateral">
  <div class="item">2</div>
</div>