title: How to align text in a span
body: <p>There are two spans side by side. The first one holds a caret and the other one has text.
  I am trying to acheive the text alignment as in pic1, but what i get is pic2.
  This can be acheived by using a table instead of ul li i know, but is there any other way by css</p>
  
  <pre><code>&lt;ul&gt;
   &lt;li&gt;
    &lt;span&gt;&lt;b class="right-caret"&gt;&lt;/b&gt;&lt;/span&gt;
    &lt;span&gt;
     Click &lt;a href="#"&gt;here&lt;/a&gt; to know how to provide the feedback.
    &lt;/span&gt;
   &lt;/li&gt;
   &lt;li&gt;
    &lt;span&gt;&lt;b class="right-caret"&gt;&lt;/b&gt;&lt;/span&gt;
    &lt;span&gt;
      Unable to Login or use the feedback form?
      Please report it &lt;a href="#"&gt;here&lt;/a&gt;.
    &lt;/span&gt;
    &lt;/li&gt;
  &lt;/ul&gt;
  </code></pre>
  
  <p>Pic 1:</p>
  
  <p><img src="https://i.stack.imgur.com/F4AsY.jpg" alt="enter image description here"></p>
  
  <p>Pic 2:</p>
  
  <p><img src="https://i.stack.imgur.com/vH2HK.jpg" alt="enter image description here"></p>
  
  <p><a href="http://jsfiddle.net/hc6kajv2/" rel="nofollow noreferrer">http://jsfiddle.net/hc6kajv2/</a></p>