Expanding search box to the left side

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>