Search input field like TripAdvisor functionality - html

Question

I am trying to achieve a similar search form like tripadvisors (at least UI and Front Design speaking) but i have till now a few issues.
On the first photo is how is my search bar with the class name for testing purposes "asdf".
so in the second picture we have the issue, the expandable part of the form being a bit wider than the input search field.
In the third pict if with have the issue if i try to assign the same width of the rest of the form with the input["text"] field of the search form.
Below my basic html and css code.
HTML
<div class="aboutUs">
<div class="textFlexContainer">
<div class="text-box">
<h1 class="heading-primary">
<span class="heading-primary-main">City</span>
<span class="heading-primary-sub">is where summer happens</span>
</h1>
<form class="search-box" action="/search">
<input class="asdf" type="search" placeholder="Explore City">
<div class="search-page">
<h3>Explore City</h3>
<ul class="search-menu-list">
<li>Our Daily Suggestions</li>
<li>Shopping</li>
<li>City Tours</li>
<li>Restaurants</li>
<li>Events</li>
<li>Things to do</li>
</ul>
<h3>Recently Reviewed</h3>
</div>
</form>
</div>
</div>
</div>
And CSS
.search-box{
display: block;
position: relative;
overflow: hidden;
z-index:15;
padding:2rem;
}
.asdf {
width: 80%;
padding:2rem;
border: none;
outline: none;
border-bottom:2px solid white;
margin-top:2.5rem;
font-size: inherit;
background-color: green;
color: #fff;
}
h3{
color:#fff;
margin-top:2rem;
}
.search-page {
height: fit-content;
background-color:green;
text-align: center;
padding:4rem 0;
transition: all 300ms ease-in-out;
display: none;
}
.search-page.visible {
display: block;
transition: all 300ms ease-in-out;
}
.search-page .search-menu-list{
display:flex;
flex-wrap: wrap;
align-items: center;
justify-content: center;
}
.search-page .search-menu-list li{
list-style: none;
}
.search-page .search-menu-list li a:hover{
transform: translateY(-1rem);
}
.search-page .search-menu-list li a{
display: inline-block;
color:#fff;
padding:5px;
list-style: none;
text-decoration: none;
margin-right: 2.5rem;
transition: all 300ms ease-in-out;
border: solid 2px white;
border-radius: 1rem;
padding: 11px 13px 11px 14px;
margin: 10px;
}
.aboutUs{
display: grid;
background-image: linear-gradient(to right bottom, rgba(53, 170, 120, 0.8), rgba(20, 139, 102, 0.8)) ,url(../img/ch4.jpg);
background-size: cover;
background-position: center;
grid-column-start: 1;
grid-column-end: 13;
grid-row-start: 2;
grid-row-end: 3;
}
.textFlexContainer{
display:flex;
align-self: center;
}
.heading-primary {
color:#fff;
text-transform: uppercase;
}
.heading-primary-main{
display: block;
font-size: 6rem;
font-weight: 400;
letter-spacing: 3.5rem;
}
.heading-primary-sub {
display: block;
font-size: 2rem;
font-weight: 400;
letter-spacing: 1.8rem;
}
.text-box {
display: inline-block;
/* This content should just be in the normal flow of the page */
/*
position: absolute
top:30%;
left:50%;
transform: translate(-50% ,-50%);
*/
text-align: center;
/* Because we're using flexbox, we can center the content both horizontally and vertically
* using this declaration
*/
margin: auto;
}
Additionaly i would love if when i click on the search bar field and the form is expanding to not have the letters above the search bar to getting squeezed on the top.

Answer 1

Not entirely sure what you need here but here's a fix for image 3. Adding 2 lines of code to your .search-page fixes the alignment issue.
.search-page{
height: fit-content;
background-color:green;
width:80%;
text-align: center;
padding:4rem 0;
transition: all 300ms ease-in-out;
display: all;
}
The width sets it to line up with the size of the text input of the form. The margin: 0 auto; is a good way to quickly center elements in css.

Answer 2

I can't see the expandable part when I tested your code but have you tried changing the width to become small and then do a margin-left to move de expandable part and align it with the search?