EDITAR: ACLARACIÓN Y CAJA DE ARENA (publicación anterior a continuación en cursiva)

https://codesandbox.io/s/serene-heisenberg-7sr1k

Mientras configuro la caja de arena, descubrí una manera de obtener el efecto que estoy buscando, será limitado.

Observe que aquí tengo el formulario de información de pago deslizándose hacia abajo desde detrás de los botones de radio (se ve fantástico, ¿no?) El botón 1 es parte de ese mismo elemento y se mueve con él, el botón 2 permanece en la parte inferior.

Esta solución está bien si es el único elemento en un contenedor (o columna de elementos) que tiene esta transición, pero si, por ejemplo, quisiera el mismo efecto para la información de envío encima o debajo de esto, sufriría lo mismo problemas como button2 tiene ahora. Habría un hueco.

Espero que esto sea mucho más claro. Me disculpo por la mala primera publicación y agradezco su tiempo y esfuerzo.

POST ANTIGUO Aquí está la parte de la página para referencia. [Imagen de referencia de la página en cuestión][1] [1]: https://i.stack.imgur.com/aFKoo.png El formulario de dirección se ocultará cuando el usuario seleccione 'PayPal' y volverá a aparecer cuando seleccione " Tarjeta de crédito". Me gustaría que el componente se deslice hacia arriba y hacia abajo desde debajo de los botones de opción. Puedo obtener esta acción con éxito agregando una transición de la parte superior de la propiedad con 0 y -100%, también con translateY, y ocultando el desbordamiento en el contenedor principal. Se ve fantástico, pero el contenedor permanece y el botón "Hacer mi pedido" permanece en la misma posición (un gran espacio entre los botones de opción y él). Actualmente, el contenedor principal está en una caja flexible. Espero que mi pregunta sea lo suficientemente clara y espero su opinión. Espero que mi pregunta sea lo suficientemente clara.