EDIT: CLARIFICATION AND SANDBOX (old post below in italic)
https://codesandbox.io/s/serene-heisenberg-7sr1k
While I set up the sandbox I figured out a way to get the effect I am looking for it will be limited.
Notice here I have the payment info form sliding down from behind the radio buttons (looks fantastic, doesn't it?) Button 1 is a part of that same element and moves with it, button 2 remains at the bottom.
This solution is fine if it's the only element in a container (or column of elements) that has this transition, but if, for example, I wanted the same effect for the shipping info on top or below of this, it would suffer the same issues as button2 has now. There would be a gap.
I hope this is much more clear. I apologize for the poor first post and appreciate your time and effort.
OLD POST Here is the part of the page for reference. [Reference Image of Page In Question][1] [1]: https://i.stack.imgur.com/aFKoo.png The address form will be hidden when the user selects 'PayPal' and will reappear when they select "Credit Card". I would like the component to slide up and down from under the radio buttons. I can successfully get this action by adding a transition of the property top with 0 and -100%, also with translateY, and putting overflow hidden on the parent container. It looks fantastic but container remains and the "Place My Order" button remains in the same position (a large gap between the radio buttons and it). Currently the parent container is in a flex-box. I hope my question is clear enough and I look forward to your input. I hope that my question is clear enough.
my suggestion is why not add the animation effect to the overall container containing all the element that is the overall container will contain the container containing the form and the place order button.d
i.e
<div className="overall-container">
<div className="form-container"></div>
`enter code here`<button>placeorder</button>
</div>