AP is short for Absolute Positioning.
I’m assuming you want the drop down portion to be absolutely placed so that it sits over any content below? You don’t need to absolutely place the search bar itself and I already gave you code to centre horizontally and vertically with flex. Instead you have used absolute positioning which takes it out of the flow and you have placed off centre which looks very odd indeed. Let flex centre vertically and horizontally with ease and maintain the flow of the document.
If you want the menu as wide as the whole search bar then set its left position to zero and its right position to zero and it will take up the whole space of its relatively placed parent. You may need to offset it by 10px to account for padding outside the search bar. (If you only wanted the menu as wide as the 'search our website" input only then you would need a revised html source to do this easily and automatically. Once you start throwing magic number fixes at something then you know that you are doing something wrong)
When you go to smaller screen the inputs drop to a vertical line for more room which means that you have to adjust the top position of the dropdown portion in your media query accordingly. Unfortunately because of the way this is constructed you can’t have an automatic top position so you will need a bit of magic number fix to account for the input and label height.
Here’s a quick fork of your codepen.
Please stop using html comments in the css file as that will break things. Usee CSS comments
/* css comment */