title: Multiple rows with number into icon
body: <p>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.</p>
  <p>Where am I wrong?</p>
  <p>Example:</p>
  <pre><code>&lt;div id=&quot;calendar&quot;&gt;
      &lt;span class=&quot;day&quot;&gt;10&lt;/span&gt;
      &lt;i class=&quot;fa fa-calendar-o fa-3x text-info&quot;&gt;&lt;/i&gt;Example first row
  &lt;/div&gt;
  
      #calendar .day{
      position: absolute;
      z-index: -9999;
      top: 30px;
      left: 21px;
  }
  #calendar:hover{
      
  }
  </code></pre>
  <p>This is ok I I use a single row, but have a problem when use multiple, like:</p>
  <pre><code>    &lt;div id=&quot;calendar&quot;&gt;
      &lt;span class=&quot;day&quot;&gt;10&lt;/span&gt;
      &lt;i class=&quot;fa fa-calendar-o fa-3x text-info&quot;&gt;&lt;/i&gt;Example first row
  &lt;p&gt;&lt;/p&gt;
  
      &lt;span class=&quot;day&quot;&gt;20&lt;/span&gt;
      &lt;i class=&quot;fa fa-calendar-o fa-3x text-info&quot;&gt;&lt;/i&gt;Example second row
  &lt;/div&gt;
  </code></pre>
  <p><a href="https://i.stack.imgur.com/mJYQC.png" rel="nofollow noreferrer">Final result that I am trying to have =&gt;</a></p>