How can I set width using percentage and get the same width with or without a vertical scrollbar?

Question

I have an element which I want to have width: 50%. But when the right scrollbar is there, that 50% looks different than before, and since certain elements appear and disappear (through animation), the scrollbar also appears and dissapears, dynamially changing my element's width.

See the Live Demo

Is there any way I can set an element's width with a percentage and not have it influenced by the presence or absence of a vertical scrollbar?