I have four items I'd like to align horizontally but the last one doesn't.

My code is :

<span class="rate">8.5</span>
    <span><i class="material-icons md-18">star_rate</i></span>
    <span style="color:darkgrey" class="release-date">2000</span>
    <span style="color:darkgrey"><i class="material-icons md-18">date_range</i></span>

EDIT :

Even by adding display: inline-block it doesn't work. Here is my html :

.info {
           display: inline-block;
    }

<div class="info">
                  <span class="rate">8.5</span>
                  <span><i class="material-icons md-18">star_rate</i></span>
                  <span style="color:darkgrey" class="release-date">2000</span>
                  <span style="color:darkgrey"><i class="material-icons md-18">date_range</i></span>
    </div>

EDIT 2 : Full code with bootsrap columns

<div class="row">
            <div class="panel panel-default">
             <div class="panel-body">
            {% for i in "123456" %}
                <div class="col-md-2">
                            <a class="title movie" href="/series/{{ 1 }}/"><img class="img-responsive"</a>
                            <a class="title movie" href="/series/{{ 1 }}/"></a><br>
                            <div class="info">
                                <span id="1" class="rate">8.5</span>
                                <span id="2" ><i class="material-icons md-18">star_rate</i></span>
                                <span id="3" style="color:darkgrey" class="release-date">2000</span>
                                <span id="4" style="color:darkgrey"><i class="material-icons md-18">date_range</i></span>
                            </div>
                </div>
            {% endfor %}
            </div>
            </div>
        </div>