Position: absolute on two divs, so that the dimensions of the parent element are equal to the larger size of the child. How can this be done?

Question

css

There is a pupap (absolutely positioned block) whose dimensions should depend on the content inside.
Inside it is ReactCSSTransitionGroup and two blocks. They change among themselves depending on the state of the component. How to make it so that during animation (opacity, for example) they overlap each other and the size of the parent is the size of the larger element?
UPD (layout):

<ReactCSSTransitionGroup transitionName="authorize-change" transitionEnterTimeout={1000} transitionLeaveTimeout={1000}>
         { this.state.stage == "form" ? (
            <div>
              <!--Логин-форма-->
            </div>
          ) : null }
          { this.state.stage == "captcha" ? (
            <div className="google-captcha">
              <!--captcha-->
            </div>
          ) : null }
        </ReactCSSTransitionGroup>