I have a chunk of code like below

<p class= "p_class" id="txtUserStatus">Add a description about your self.. </p>

<i class="fa fa-pencil" aria-hidden="true" id="btnEditStatus"></i>
<input type="text" id="place_id" rows="4" cols="50" name="ment" form="usrform" style ="display:none;">
<span class="fa-stack fa-1x" id = "okID" style = "display:none;">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-check fa-stack-1x" aria-hidden="true"></i>
</span>

I want to align/place the pencil icon just after the p tag which I am unable to do.

On click of the p, you see a textbox and ok icon, so by default the pencil icon should be at the position of the ok icon.

Can someone help me do this simple CSS fix.

Here's the fiddle.

NOTE : Don't want my icon class inside p tag.

I have a chunk of code like below

<p class= "p_class" id="txtUserStatus">Add a description about your self.. </p>

<i class="fa fa-pencil" aria-hidden="true" id="btnEditStatus"></i>
<input type="text" id="place_id" rows="4" cols="50" name="ment" form="usrform" style ="display:none;">
<span class="fa-stack fa-1x" id = "okID" style = "display:none;">
<i class="fa fa-circle-thin fa-stack-2x"></i>
<i class="fa fa-check fa-stack-1x" aria-hidden="true"></i>
</span>

I want to align/place the pencil icon just after the p tag which I am unable to do.

On click of the p, you see a textbox and ok icon, so by default the pencil icon should be at the position of the ok icon.

Can someone help me do this simple CSS fix.

Here's the fiddle.

NOTE : Don't want my icon class inside p tag.

• javascript
• jquery
• html
• css

• Why do you need CSS? Just put the i inside the p: jsfiddle/8sf3ztor/3 – Rory McCrossan Commented Mar 21, 2017 at 9:45
• just added a note, I don't want to do that. – Suraj Commented Mar 21, 2017 at 9:46
• This will cause the icon when clicking on the label to move to the top. The behaviour of your first solution was better as the pencil icon would be invisible when editing the text. – hering Commented Mar 21, 2017 at 9:50
• jsfiddle/8sf3ztor/6 Is like that you want !! – Jack jdeoel Commented Mar 21, 2017 at 9:58

7 Answers 7

Just provide display: inline-block to your .p_class class.

This will let your .p_class div not to occupy the entire width of the container, and your .fa-pencil icon which is display: inline-block by default will occupy space after .p_class.

.p_class {
  display: inline-block;
}

I presume you want the icon floating after you tag CSS:

i {float:left}

add the following to the css:

.p_class{
  display:inline-block
}

Try something like: .p_class { float: left; }

You can add display:inline-block to class "p_class"

just add following class

#txtUserStatus{
   display: inline-block;
}

If you want your icon after the <p> do:

p::after {
    content:url(youricon.png);
    <related CSS here>
}