Sorry for the convoluted title. Could not come up with anything better.
On a webpage I have centered text which is a year number. There is also an expander/collapse feature which expands/collapses text below the year number. The [+] sign is used to expand the text. The [+] sign is in the same line as the year. When the [+] is clicked, the sign moves to the end of the expanded text and turns into [-].
At the exact time when the [+] sign is clicked and when it moves to the end, the year (that is 2015) moves a bit to the right in order to take up some of the space which was used by the [+] sign.
My question now is: Is there some way to avoid this shift? In other words, can 2015 [+] be moved to the right such that 2015 does not move when the [+] is clicked?
Link to the JSFiddle is here.