align text and icon CSS

I'm trying to do a list with icons. I want to align my text. Here is a jsfiddle to show my question:

<ul>
 <li><i class="fa fa-phone"></i>lorem ipsum test<br>TEST<br></li>
 <li><i class="fa fa-phone"></i>00 00 00 00 00</li>             
</ul>

TEST is under the icon but I want to put it under the text. I tried with display:table-cell without success. I forgot to specify: the content is generate dynamically (with tinyMCE). So the user can't put HTML elements in the text (I don't want to). I need to write CSS rules to align the text automatically (like in a cell).

Do you have an idea please?

Thanks!

Solution

maybe so

ul{
    list-style:none;
}
ul li{
    position: relative;
    padding-left: 20px;
}
ul li i{
    position: absolute; top: 0; left: 0;
}

<link href="http://fortawesome.github.io/Font-Awesome/assets/font-awesome/css/font-awesome.css" rel="stylesheet"/>
<ul>
    <li><i class="fa fa-phone"></i>lorem ipsum test<br/>TEST<br/></li>
 <li><i class="fa fa-phone"></i>00 00 00 00 00</li>             
</ul>