Wrong div blocks layout on a page

Question

I'm making a very simple page with a list of information blocks, that contain photo and description. When the description length increases, the div's height increases as well and every next row of item-block flows right next to the highest div.

Is there any possibility to output the following block rows without a break? Either below the previous ones or just below the highest div in a previous row.

Here is my HTML and CSS code:

.item-container {
  max-width: 90%;
  display: table;
  border: 4px double #d9d9d9;
  border-radius: 5px;
  margin: auto;
}
.item-block {
  border: solid lightgray 1px;
  border-radius: 10px;
  width: 230px;
  float: left;
  padding: 5px;
  margin: 3px;
}
.item-image {
  padding-top: 2px;
  width: 220px;
  height: 220px;
}
.item-text {
  font-size: 14px;
  color: #666666;
  text-align: justify;
}

<div class="item-container">

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/tech" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis. Lorem ipsum dolor.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cumque dolorem eos illo itaque maiores optio quisquam. Autem excepturi, harum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/tech" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis. Lorem ipsum dolor.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cumque dolorem eos illo itaque maiores optio quisquam. Autem excepturi, harum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/tech" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis. Lorem ipsum dolor.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cumque dolorem eos illo itaque maiores optio quisquam. Autem excepturi, harum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/tech" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis. Lorem ipsum dolor.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Assumenda cumque dolorem eos illo itaque maiores optio quisquam. Autem excepturi, harum?Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div>
  </div>

  <div class="item-block">
    <div>
      <img src="https://placeimg.com/400/400/any" alt="Test Image" class="item-image">
    </div>
    <div class="item-text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Id, veritatis.</div>
  </div>

</div>

Answer 1

one way to do this accurately is using a script that finds the highest block and then gives its height to all the blocks

check this jsfiddle

the code added :

$(document).ready(function(){

var highest = 0;
    $('.item-block').each(function(){  
            if($(this).height() > highest){  
            highest = $(this).height();  
    }
});    
$('.item-block').height(highest);

});

or if you want to use only css add display:inline-block instead of float:left and also add vertical-align:top to .item-block see here jsfiddle

but this solution will make the blocks look kinda messy because they won't have equal heights ...that's why the first solution with jq

Answer 2

For those who've come across this question during research to solve their own issues, this is a codepen demonstrating the solution proposed:

http://codepen.io/anon/pen/gMgLpp

.item-block {
    border: solid lightgray 1px;
    border-radius: 10px;
    width: 230px;
  vertical-align:top;   /* Added */
    padding: 5px;
    margin: 3px;
  display:inline-block; /* Added */
}