Make image not shift siblings to side - html

Question

I'm running into an issue where if I add an image as a sibling to an element then that element will shift over to accommodate the inserted image. What I want is the element to stay horizontally centered even if the image is inserted. Here is a picture of the issue:
Each row is its own div with a p element and an optional image, which is the red explanation point. I want the p element with text "Corrupted" to stay horizontally aligned even with the inserted sibling.
Here is my CSS:
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table
width: 100%;
}
#friendsList div p{
display: inline;
}
The inserted image has css like this:
#friendsList div img {
margin-bottom: 5px,
float: right,
vertical-align:middle
}
Is there a way to have the p element stay horizontally aligned even when it has a sibling?
EDIT*** Here is a CSSdeck example: http://cssdeck.com/labs/2uel0ogm

Answer 1

The following possibilities come to my mind:
Add the image as background image and use background-position.
Apply position: relative to the div and something like position: absolute; right: 5px; top: 5px; to the image. This makes the image absolutely positioned within the div as container.

Answer 2

Place image left to the p tag and give float: right to the img.
see the example
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table
width: 100%;
background: orange;
border: 1px solid red;
}
#friendsList div p{
display: block;
margin: 0 auto;
text-align: center;
}
#friendsList div img {
float: right;
height: 25px;
width: 25px;
margin-left: -25px;
}
<div id="friendsList">
<div><p>first</p></div>
<div><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png" alt=""><p>second</p></div>
</div>
Alternative solution(using position property)
#friendsList div{
padding-top: 15px;
padding-bottom: 15px;
margin: 0;
display: table;
width: 100%;
background: orange;
border: 1px solid red;
position: relative;
}
#friendsList div p{
display: block;
margin: 0 auto;
text-align: center;
}
#friendsList div img {
position: absolute;
right: 0;
height: 25px;
}
<div id="friendsList">
<div><p>first</p></div>
<div><img src="http://icons.iconarchive.com/icons/oxygen-icons.org/oxygen/128/Emotes-face-smile-icon.png" alt=""><p>second</p></div>
</div>