title: Stop text from wrapping under an icon inside an anchor
body: <p>I'm trying to create a link that is represented by an icon (I'm using <a href="/questions/tagged/font-awesome" class="post-tag" title="show questions tagged &#39;font-awesome&#39;" rel="tag">font-awesome</a> for icons) and some text. If the text wraps down to the next line I want it in line with the text, rather than appearing under the icon.</p>
  
  <p>I've tried a solution I found in this <a href="https://stackoverflow.com/a/15421257/324672">answer</a> and it seems to work fine for me</p>
  
  <pre><code>&lt;a&gt;
      &lt;i class="fa fa-exclamation-circle"&gt;&lt;/i&gt;
      &lt;p&gt;Text of the link&lt;/p&gt;
  &lt;/a&gt;
  
  
      i {
         float: left;
      }
      p {
         overflow: hidden;
      }
  </code></pre>
  
  <p>However, in Eclipse where I'm representing this (in a JSP page) it throws a warning ("invalid location of tag <code>p</code>") that I can't have a paragraph tag inside an anchor (I gather allowing that is an HTML5 standard).</p>
  
  <p>Using <code>span</code> instead of <code>p</code> doesn't seem to work.</p>
  
  <p>Does anyone know how to accomplish this with a <code>span</code>? Or know of a better way to do this?</p>
  
  <p>I need to support IE8+, so I don't <em>think</em> any flexbox stuff would work.</p>
  
  <p>To be clear
  I would like this:</p>
  
  <pre><code>*FA-icon*   Lorem ipsum dolor sit amet, consectetur
              adipiscing elit, sed.
  </code></pre>
  
  <p>Instead of this:</p>
  
  <pre><code>*FA-icon*   Lorem ipsum dolor sit amet, consectetur
  adipiscing elit, sed do eiusmod tempor incididunt
  </code></pre>