making things line up neatly

without using a table

[Purple Martin]

Hi,

I want to make a vertical list of words, each with a small arrow graphic to the right, kind of like this (but without the dots):

Pineapple.> 
Grape.....> 
Banana....>

As you can see, I'd like all the arrow graphics to be in line with each other.

This whole thing sits in a div. I won't know the width because I won't know what words will go in the list because it'll be dynamically generated. That means I can't set the width of a span to line up the arrows.

I could just use a table to line up the arrows, but I don't want to because it's not tabluar data - so is there a CSS trick to do this?

[aevea]

If the arrows are imgs, float them to the right.

#favoritefruits img {float: right; }

adam

[Purple Martin]

Yes the arrows are images, and using float was a good idea, but unfortunately it made the div go to 100% wide with the arrows waaaaaaay over on the right. I feel like there must be a simple answer and I'll kick myself when I see it, but I just can't think of it.

[iamlost]

<edited to remove post: missed the "unKnown-width" requirement.>