How to change multiple different texts by button click?

[sh11]

I have three Cards, showing a certain monthly prizing with different prizes in each of the three cards. Clicking on a button reveals the annually prices. So I need to toggle. I did this with add and remove element. The Problem is: When clicking the toggle button, the formerly not visible text appears but under the formerly visible text (Because that is the position in the DOM). This causes a kind of “jump”.
I’ve no idea, how I can remove the element with the monthly prive from it’s position in DOM and replace it with the annual price without making the text jump. And vice versa.
I’ve prepared a Codepen for more clarity.

I’ve prepared a codepen for more clarity

[m3g4p0p]

@sh11

When clicking the toggle button, the formerly not visible text appears but under the formerly visible text (Because that is the position in the DOM).

Hi @sh11, actually this is just because the 2nd element has an additional margin due to this CSS rule:

article p + p {
    margin: 2em 0;
}

To avoid the jumping you might exclude your toggle content from that rule like so:

article p + p:not(.toggle-content) {
    margin: 2em 0;
}

[sh11]

Thank you so much. I completely did not see the CSS part of it. Cheers, Sven