Why browser does so weird moves line?

.table{
    width: 500px;
}
.table td{
    vertical-align: middle:
}
.logo{
    vertical-align: middle;
    display: inline-block;
}

<table class="table" border="1">
    <tr>
        <td>
            <span class="logo">
                <img src="http://ift.tt/1LC1QR0" alt="" />
            </span>
            <span>Ололо лололо олололо лололо лолололо лололлололл лолололлл оллолло лоллогллол лололо</span>
        </td>
    </tr>
</table>

Why is the first line posted normally, and the other at the bottom? I tried different "display", "float" and "clear" attributes but nothing happened