I need to setup a menu, with an icon each line with a number into. Each row is built in JS / Jquery and than injected into html. I started with different demo of menus, like the Bootstrap Sidebar menu, but each time I try to add icon with number, I have a problem in the row.

Where am I wrong?

Example:

<div id="calendar">
    <span class="day">10</span>
    <i class="fa fa-calendar-o fa-3x text-info"></i>Example first row
</div>

    #calendar .day{
    position: absolute;
    z-index: -9999;
    top: 30px;
    left: 21px;
}
#calendar:hover{
    
}

This is ok I I use a single row, but have a problem when use multiple, like:

    <div id="calendar">
    <span class="day">10</span>
    <i class="fa fa-calendar-o fa-3x text-info"></i>Example first row
<p></p>

    <span class="day">20</span>
    <i class="fa fa-calendar-o fa-3x text-info"></i>Example second row
</div>

Final result that I am trying to have =>