title: Span position inside anchor tag
body: <p>I have a <code>span</code>inside the <code>anchor</code>element. 
  All I want is:
  1) Have a width for the <code>anchor</code> text, so that it does not overlap on the <code>span</code> element.
  2) The <code>span</code> element should be aligned to the first line of the anchor text
  3) The <code>span</code> element to be right of the <code>anchor</code> text</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>a {
    width: 147px;
    display: inline-block!important;
  }
  span.expand {
    background: url(https://cdn2.iconfinder.com/data/icons/deadsimple/youtube.gif) no-repeat right center;
    text-decoration: none !important;
    padding-right: 14px;
    margin-left: 100px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;a href="#"&gt;
      Enrollment to communication skills 
      &lt;span class="expand"&gt;&lt;/span&gt;
  &lt;/a&gt;</code></pre>
  </div>
  </div>
  </p>
  
  <p>I have no other choice but to use <code>span</code> inside <code>anchor</code>, even though it is not a recommended.</p>