Expanding search box to the left side - html

Question

I was trying to make this expandable search box expand to the left side, but it didn't work out. Can you guys please help me solving out this problem?
<div class="search-box d-flex justify-center align-center">
<input type="text" placeholder="Type to search ..">
<a class="p-20 cursor-pointer"><img class="search-btn max-h-20" src="./assets/logo/search.png" alt="search" /></a>
</div>
Here's the CSS :
.search-box:hover > input{
display: inline-block;
border-radius: 40px;
border: 1px solid whitesmoke;
padding: 0 10px;
width: 170px;
padding: 8px;
outline: none;
color: whitesmoke;
box-shadow: 0 0 5px whitesmoke, 0 0 10px whitesmoke;
}
.search-box:hover{
transition: width 0.6s ease;
}
Thanks!

Answer 1

i changed a your code a bit, but this is maybe like u want to (the red box with height and width is just for demonstration, feel free to delete that part ;) ):
.search-box {
display: flex;
justify-content: flex-end;
/* for demonstration */
background-color: red;
width: 250px;
height: 150px;
padding: 10px;
}
.search-box input {
border-radius: 40px;
border: 0;
box-shadow: 0 0 5px whitesmoke, 0 0 10px whitesmoke;
padding: 0;
width: 0;
height: 15px;
transition: padding 0.6s ease-in-out,
width 0.6s ease-in-out;
}
.search-box:hover > input{
display: inline-block;
border-radius: 40px;
width: 170px;
outline: none;
color: whitesmoke;
padding: 8px;
border: 1px solid whitesmoke;
}
<div class="search-box d-flex justify-center align-center">
<input type="text" placeholder="Type to search ..">
<a class="p-20 cursor-pointer"><img class="search-btn max-h-20" src="./assets/logo/search.png" alt="search" /></a>
</div>