How can I make the search bar expand to the right instead of the left?

Crelot

I'm trying to get the search bar to expand when you hover over this particular div, but I want it to expand to the right and not to the left (which it is currently doing) and the search icon will move to the far right as well. Is there a way to do this? I want the search bar to be on the far right of the navbar, hence float:Right.

.search {
  border-radius: 40px;
  height: 40px;
  background-color: orange;
  float: right;
  transform: translate(-280px, 5px);
}

.search input {
  position: relative;
  left: 20px;
  top: 8px;
  padding: 5px;
  outline: none;
  width: 0px;
  border-radius: 0px 20px 20px 0px;
  border: none;
  background: transparent;
  transition: 0.2s;
}

.search:hover input {
  width: 150px;
}

.btn {
  height: 40px;
  width: 40px;
  border-radius: 20px;
  background-color: tomato;
  transform: translate(0px, -25px);
}

.btn i {
  position: Relative;
  top: 12px;
  left: 12px;
}

<div class="search">
  <input type="text" placeholder="search...">
  <div class=btn>
    <i class="fas fa-search"></i>
  </div>
</div>

Professor Abrosius

Granted, I might be getting a little carried away, but I believe the following will do what you want, as it expands to the right and moves the button to the right.

:root{
  --i-trans-fast:350ms;
}

.search{
    border-radius: 40px;
    height:40px;
    background-color:orange;
  /*
    border: added to better define object boundary
    float: set left to facilitate the appearance to the right on mouseover 
  */
  border:2px solid tomato;
    float:left;
}

.search input{
    position: relative;
    left:20px;
    top:8px;
    padding:5px;
    outline: none;
    width:0px;
    border-radius: 0px 20px 20px 0px;
    border: none;
    background: transparent;

    
    /*
      text-indent: added to show space between button and placeholder/text
      transition: changed to make the appearance smoother
      opacity: added to give fade-in
    */
    text-indent:1.5rem;
    transition:ease-in-out all var(--i-trans-fast);
    opacity:0;
}

/*
  added: .search input:focus so that the panel does not disappear
*/
.search:hover input,
.search input:focus{
    width:150px;
    opacity:1;
}

/*
  added to remove ome extra indent which looks
  odd when button has moved to the right
*/
.search input:focus{
  text-indent:0.5rem;
}

/*
  added: various placeholder settings to make text disappear when text
  element has focus.
*/
::-webkit-input-placeholder{
    transition:ease-in-out all 250ms;
}
:-moz-placeholder{
    transition:ease-in-out all 250ms;
}
::-moz-placeholder {
    transition:ease-in-out all 250ms;
}
:-ms-input-placeholder {  
    transition:ease-in-out all 250ms;
}

:focus::-webkit-input-placeholder{
    color:transparent;
}
:focus:-moz-placeholder{
    color:transparent;
}
:focus::-moz-placeholder {
    color:transparent;
}
:focus:-ms-input-placeholder {  
    color:transparent;
}


.btn{
    height:40px;
    width:40px;
    border-radius:20px;
    background-color:tomato;
    transform: translate(0px, -25px);
}

.btn i{
    position:relative;
    top:2px;
    left:7px;
    /*
      opacity:added to give fade-in
      transition: added to make fade-in smooth
    */
    opacity:0;
    transition:ease-in-out opacity var(--i-trans-fast);
}

/*
  added to give fade-in final appearance
*/
.btn:hover i,
.search input:hover + div > i{
    opacity:1;
}

/*
  set content of pseudo element as arrow - initially transparent
*/
.btn i:before{
  font-family:arial;
    content:'\25BA';
    font-size:2rem;
    color:red;
}


/*
  added to allow smooth movement of search bttn to the right
*/
.search input + div{
  transition:ease-in-out all var(--i-trans-fast);
}


/*
  Added to move the search button to the right
*/
.search input:focus + div{
  transform: translate(123px, -25px) rotateZ(360deg);
}


/*
  change opacity of i elememt
*/
.search input:focus + div > i{
    opacity:1;
    left:10px;
    top:2px;
}

/*
  change color of and content of i pseudo element
*/
.search input:focus + div > i:before{
    color:white;
    content:'\003F';
}

<div class='search'>
    <input type='text' placeholder='search...' />
    <div class='btn'>
        <i class='fas fa-search'></i>
    </div>
</div>