Question

I have a sidebar that displays an icon and some text aligned. This sidebar is resizable and sometimes text and icon don’t fit in the same line.

This jsfiddle shows an example. Blue button shows how it looks like when the line fits and orange button shows what happens when the text is too long.

My goal is to make it look like this when the line is too long:

It is text should stay at rigth side of the image vertically centered with it. No problem if I have to change HTML.

Answer 1

Try this way:

ul li {
    cursor: pointer;
    padding-left: 70px;

ul span {
    vertical-align: middle;
    display: inline-block;
}

ul img {
    vertical-align: middle;
     margin: 0 0 0 -70px;
}

http://jsbin.com/ogofun/5/edit#html,live