CSS Clear after every nth-child

Question

I have multiple items with same width inside a container. Because of different heights of the elements, there is problem with the alignment, you can see in image below.

Answer 1

sabof is right. But It will be great if you use display: inline-block instead of float:left. Please see below for example.

.list {
  width: 300px;
  font-size: 0;
}
.item {
  display: inline-block;
  width: 90px;
  font-size: 16px;
  background: yellow;
  margin-right: 5px;
  margin-bottom: 10px;
  vertical-align: top;
}

<div class="list">
  <div class="item">Lorem ipsum dolor sit amet,</div>
  <div class="item">Lorem ipsum dolor sit amet, consectetur adipiscing elit.</div>
  <div class="item">Lorem ipsum dolor sit amet,</div>
  <div class="item">Lorem ipsum dolor sit amet,</div>
  <div class="item">Lorem ipsum dolor sit amet</div>
</div>