Sign up intro component - Going for perfection! (Sass & vanilla Js)

Hey guys, I gathered some interesting questions for you while I coded. I would appreciate your take on them:

What do you think is the cleanest way how to make an input-block component (input+error/valid icon+error message)? Use flex? grid? relative/absolute position for icon? Or just background image on input?

How do you prefer to space elements? I tried removing all margin/padding and then added just margin-bottom to push stuff down, good approach?

When you go to desktop view and shrink the width, why right side (sign-up box) shrinks first and left side follows later? Why they don't shrink at the same time?

When I try to use input pseudo-classes like :invalid, :valid, :not(:placeholder-shown) etc. I can do almost all the states of the form validation take for example this codepen from css tricks https://codepen.io/chriscoyier/pen/JXgKjb, BUT how to style "visited && invalid" input - Firefox puts red box shadow when that happens and that is all good, but how do I change this behavior? For example take previous codepen and add this to input elem: &:invalid { box-shadow:none; //This will remove default behavior } Adding this, though, is not the same - it WILL display this on the page load - that I don't want - load should be clean, but I still would like to style default box-shadow etc. props. &:invalid { border: 1px solid red; }

Anyways! If you could help me with even one of the above it would be a great help. Cheers!