Properly align Css boxes - html

Question

I have boxes that wouldnt align properly. Some of them are 40px higher than others, and have remove icon as you can see in the picture:
Not working
If all boxes are the same height then boxes would align properly:
working
Unfortunately i cannot make them all the same height. I want to align them properly, without changing height. I know that there will be some margin differences because of diferent height but that is okay.
Here is code for the boxes:
.parents-parent {
margin: auto;
width: 800px;
}
.parent {
float: left;
width: 200px;
background-color: white;
border: 1px solid rgb(230,230,230);
margin: 10px;
min-height: 150px;
}
.exam-box-el {
background-color: white;
height: 40px;
line-height: 40px;
width: 100%;
}
.exam-box-el:hover {
background-color: rgb(247,247,247);
cursor: pointer;
}
.parent a {
color: rgb(85, 85, 85);
}
.parent a:hover {
text-decoration: none;
color: rgb(85, 85, 85);
}
.parent .glyphicon {
margin: 0 5px 0 10px;
}
.more {
border-top: 1px solid rgb(210,210,210);
}
.exam-title {
text-align: center;
background-color: ;
height: 40px;
line-height: 40px;
width: 100%;
}
.exam-title a {
color: rgb(51, 122, 183);
}
.exam-title a:hover {
text-decoration: none;
color: rgb(51, 122, 183);
}
and html:
<div class="parents-parent">
{% for exam in exams %}
<div class="parent" exam-id="{{ exam.pk }}" csrf="{{ csrf_token }}">
<div class="exam-title">
<a><b>Test številka {{ exam.exam_number }}</b></a>
</div>
<a class="exam-span-wrapper">
<div class="exam-box-el exam-span-file">
<span class="glyphicon glyphicon-file"></span> Test
</div>
<ul class="exam-ul">
{% for file in exam.examfile_set.all %}
<li class="exam-li-img" src="{{ file.exam_file.url }}" alt="Slika Testa" width="60" height="60" class="img-resposive exam-img">Slika Testa {{ forloop.counter }}</li>
{% endfor %}
</ul>
</a>
<a class="comment">
<div class="exam-box-el">
<span class="glyphicon glyphicon-comment"></span> Komentarji
</div>
</a>
<a class="mark-exam">
<div class="exam-box-el">
<span data-toggle="tooltip" data-placement="bottom" title="Potrebno popravka" class="glyphicon glyphicon-ban-circle {% if user in exam.exam_mark.all %}active{% endif %}"></span> Potrebno popravka
</div>
</a>
<a href="{% url 'profile' exam.exam_user %}">
<div class="exam-box-el"><span class="glyphicon glyphicon-user"></span>{{ exam.exam_user }}
</div>
</a>
{% if exam.exam_user == user %}
<a href="#" class="remove-exam">
<div class="exam-box-el more">
<span class="glyphicon glyphicon-remove glyphicon-remove-exam" data-toggle="tooltip" data-placement="bottom" title="Izbriši"></span>
Odstrani
</div>
</a>
{% endif %}
</div>
{% endfor %}
</div>

Answer 1

Add .parents-parent { display: flex; flex-wrap: wrap; } and remove the float from .parent. That will create flex rows and each item will stretch to match the height of the parent.
Or if you're always going to have 3 cells per row, you can use :nth-child() on the floated cells to clear the left floats on every 3rd element. You would do that by adding .parent:nth-child(3n + 1) { clear: left; }