Form Validation Credit Card

Summary: I had a very hard time planning out my css positioning. JavaScript comes easier to me than css positioning. I am unsure how to start my projects without creating a set width and/or height px value. I know it is best practice to code with both desktop and mobile in mind, but I always just start in mobile and say “I’ll deal with media queries at the end.” I had MAJOR issues with positioning the 2 cards absolutely as well as adjusting all of the elements inside of the cards.

Questions / Issues

1. My main issue is how can the card be positioned absolutely to the background, but also positioned relatively to the elements inside of the card.
2. Typing “3333 3333 3333 333f” into the card number box does not show a red border. The solution should be around lines 64 - 84 of JavaScript. I just can’t find it.
3. Also on the desktop, the card number inputs from right to left instead of left to right. Not sure what's going on there lol
4. I don't know how to add a linear gradient on an input border so I just added a single color.

Thank you so much for any feedback at all, I appreciate it!