Проблема при позиционировании элементов

Имеется блок с картинками

На фото есть значок просмотров в данному случае глазок, и я хочу добавить еще один показатель в правом углу картинки(часы), и вот когда я это делаю, у меня все обьекты смещиваются в кучу. Вот так я делаю блок

<div class="video"><a href="watch.php?id='.$row[0].'"><span class="views"><span class="fa fa-eye"> '.$row[9].'</span></span><span class="time"><span class="fa fa-clock-o"> '.$row[9].'</span></span><div class="image" ><img src="https://thumbs-prod.si-cdn.com/P4Smi9MthEBXH7pdW8Y-bvwR6ts=/1072x720/filters:no_upscale()/https://public-media.si-cdn.com/filer/04/8e/048ed839-a581-48af-a0ae-fac6fec00948/gettyimages-168346757_web.jpg" class="image"></div><p>Desc</p></a></div>

Где класс .time это часы, а .views просмотры.

CSS

.time{
    float: right;
    position: absolute;
    right: 0;
    z-index: 10;
    margin: 15px;
    padding: 5px;
    border-radius: 5px;
    color: white;

    background-color: rgba(0,0,0,0.5);
}
.views {
    float: left;
    position: absolute;
    z-index: 10;
    margin: 15px;
    padding: 5px;
    border-radius: 5px;
    color: white;

    background-color: rgba(0,0,0,0.5);
}

.image {

    max-width: 100%;
    height: auto;

}