Interactive rating component using HTML, CSS and JS

Initially, I tried to make the JavaScript code change the style.display of the thank you card from 'none' to 'block', but this interfered with the layout and the behavior of the flexbox. When you hide the card with display: none, the element is completely removed from the page flow, which can sometimes break the layout when re-displayed with display: block. Instead of using display: none and display: block, it is safer to use visibility and opacity to prevent the layout from breaking when the content is hidden and displayed. I also had to adjust the position of the cards. I created a card-container div to wrap both cards and used position: relative. In the cards, I used position: absolute so that they occupy the exact same space within this container.