CSS inline-block wrap issue with mixed text and empty div

Question

I have an alignment problem of divs (mixed empty or with text) when display: inline-block is set. See the following image for an example:

As you can see, the divs with the text somehow are not aligned with the rest of the divs. See this JSFiddle for a working example of my problem.

I already know some ways for fixing this problem but I want to understand why it happens. My goal is to solve this issue with minimal CSS changes (possibly with no HTML modification).

HTML

<div class="bar">
  <div class="actors">
    <div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div>
    <div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div>
    <div class="actor num"><span>5</span></div>
    <div class="actor" style="background-image: url('http://lorempixel.com/32/32/')"></div>
    <div class="actor num"><div>6</div></div>
  </div>
  <div class="lol">lol</div>
</div>

CSS

.bar {
  height: 40px;
  border-bottom: 1px solid #000;
}
.actors {
  float: left;

}
.actor {
  display: inline-block;
  width: 34px;
  height: 34px;

  background-color: gray;
  border-radius: 16px;
  border: 1px solid red;
}
.num {

}
.lol {
  float: right;
}

Answer 1

The reason is the default value of vertical-align, which every text has. It has the initial value baseline and thus the orientation is on baseline.

The easiest and smartest way to fix it is to set it to vertical-align: top;:

.actor {
    vertical-align: top;
}

Demo: JSFiddle