Div se faisant pousser progressivement par 1 autre (transition css)

Bonjour,

J'ai partiellement réussi à faire une animation d'un bloc qui, lorsqu'il est survolé, se fait pousser par un autre via une transition sur 2 secondes:
https://www.training-dev.fr/Code-Tester/Cin~IME!ds

Cela fonctionne assez bien pour le bloc de droite (le bloc vert .checkbox) qui est masqué au début, puis se déploie sur 2 secondes lorsqu'on survole son bloc parent (le bloc .container).

Mon souci, c'est que le bloc .text passe en un instant de sa taille max à sa taille mini, il n'y a pas de progression. Le texte en en effet immédiatement rogné à sa taille mini. J'ai mis un fond blanc pour qu'on voie mieux. Je souhaiterais que le bloc blanc réduise sa taille durant 2 secondes, poussé par le bloc vert. Ce n'est pas exactement le cas actuellement.

Est-ce que quelqu'un verrait comment modifier le bloc .text pour qu'il ait toujours une taille dynamique (pas une taille définie précisément) et qu'il réagisse comme je le souhaite.

Merci

En changeant

transition: transform 2s;

par

transition: all 2s;

c'est mieux... mais pas encore parfait.
Le div de droite ne pousse pas vraiment celui de gauche, il y a un espace entre les 2.
J'ai pensé que c'était peut-être dû à la marge droite de .container, j'ai donc tenté de la mettre à 0 mais cela ne solutionne pas le problème pour autant.

D'autre part, plus grave encore selon moi, le

transition: all

fait l'équivalent d'un

transition: transform

et d'un

transition: width

Or pour des raisons de performances, il n'est recommandé il me semble que d'utiliser les

transition: transform

et

transition: opacity

Est-ce que vous verriez une solution pour modifier cela de manière à n'utiliser que des transition: transform ou opacity et non le "transition: width"?

Merci