title: align the icon with the p tag
body: <p>I have a chunk of code like below</p>
  
  <pre><code>&lt;p class= "p_class" id="txtUserStatus"&gt;Add a description about your self.. &lt;/p&gt;
  
  &lt;i class="fa fa-pencil" aria-hidden="true" id="btnEditStatus"&gt;&lt;/i&gt;
  &lt;input type="text" id="place_id" rows="4" cols="50" name="comment" form="usrform" style ="display:none;"&gt;
  &lt;span class="fa-stack fa-1x" id = "okID" style = "display:none;"&gt;
  &lt;i class="fa fa-circle-thin fa-stack-2x"&gt;&lt;/i&gt;
  &lt;i class="fa fa-check fa-stack-1x" aria-hidden="true"&gt;&lt;/i&gt;
  &lt;/span&gt;
  </code></pre>
  
  <p>I want to align/place the pencil icon just after the <code>p</code> tag which I am unable to do.</p>
  
  <p>On click of the <code>p</code>, you see a textbox and ok icon, so by default the pencil icon should be at the position of the ok icon.</p>
  
  <p>Can someone help me do this simple CSS fix.</p>
  
  <p>Here's the <a href="https://jsfiddle.net/8sf3ztor/2/" rel="nofollow noreferrer">fiddle</a>.</p>
  
  <p>NOTE : Don't want my icon class inside <code>p</code> tag.</p>