CSS interpolate-size to the rescue

import "https://cdn.jsdelivr.net/npm/baseline-status"; Over on Chrome for Developers , @bramus wrote a great piece on interpolate-size and the new transitions it can enable with keywords like auto . I see the following pattern used when the designer wants to reduce visual noise during sign in, the password field is hidden until a valid username is provided . The new interpolate-size feature makes this trivial, especially when combined with :has() . ⤷ caniuse The Setup # Opt your whole site into transitioning keywords. This is definitely something that will quickly make it into CSS resets. :root { interpolate-size : allow-keywords ; } Next, enable transitions on the password field: .password { transition : height .3 s var (--ease-3) , opacity .3 s var (--ease-3) ; } Last, hide the password field when the username isn't valid: .username:not ( :has (: user-valid )) + .password { height : 0 ; opacity : 0 ; overflow : clip ; } As soon as the username field is valid, height: 0 will stop applying and the password field will transition to its natural height: auto . The Demo # Here it is all put together. See the Pen by Adam Argyle ( @argyleink ) on CodePen . There's tons of demo's this unlocks, what are you building!?