Indent text in list items with images and list-style-type set to none

Question

My problem is kind of similar to this, but I have img within lis of my unordered list.

Following is my markup. (think of it as UI for comments, as in Facebook or G+, where comment text and user's profile picture thumbnail is shown side-by-side)

<ul class="comments">
    <li><img src="thumb.jpg" class="user-img" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
    <li><img src="thumb.jpg" class="user-img" />Aliquam tincidunt mauris eu risus.</li>
    <li><img src="thumb.jpg" class="user-img" />Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat. Morbi in sem quis dui placerat ornare. Pellentesque odio nisi, euismod in, pharetra a, ultricies in, diam. Sed arcu. Cras consequat.</li>
    <li><img src="thumb.jpg" class="user-img" />Lorem ipsum dolor sit amet, consectetuer adipiscing elit.</li>
</ul>

And following is the CSS for the same.

.comments {
    list-style-type: none;
    clear: both;
}

.comments li {
    padding: 3px;
    font-size: 12px;
}

.comments li img {
    margin-right: 10px;
}

And I'm getting result as following:

As it is clearly visible that when text doesn't fit the width, it goes below the image which I don't want. How can I keep it aligned instead of flowing below thumbnail image?

Note:

The images used for list items are not intended to be used as list-style-image, this is prototype design and images will be different for each li.

Answer 1

IF the thumbnail images are different for each li use this Demo

If the thumbnail images are same for all li. Do this -

.comments li {
    background: url(thumb.jpg) no-repeat left top;
    padding: 0 0 10px 50px;
    font-size: 12px; min-height: 44px; /*thumb image height*/
}