Text cutting off in sliding banner

I have a sliding banner and a span in each banner element. I have some text in the span tags but the text is being cut off on the right when you expand the banner element.

There is a开发者_如何学Gon example here: http://jsfiddle.net/vCbcz/13/

Please ignore the space on the left, it is intentional.

Does anyone know why this is happening and how to fix it?

I don't know if it will suit your needs, but I just changed the animate width: http://jsfiddle.net/vCbcz/14/.

It doesn't cut off on the right anymore.

After messing around with your code, when you click you are telling the div to expand to 600px with the parent container at only 535px wide.

Your desired behavior can be acheived with some modifications to the padding and width of the info class and changing your toggle to match the parent container's width:

http://jsfiddle.net/vCbcz/23/