how to make search bar expand to right side instead of left?

Question

I'm trying to make the seach bar expand when you hover over this particular div, but instead of expanding to the left (which it is currently doing) i want it to expand to the right and the search icon would move to the far right as well. Is there any way this is possible? I want the search bar to be located on the far right side of my navigation bar, thus the 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>

Answer 1

Admittedly I perhaps got a little carried away but I believe the following does what you were after in that it expands to the right and moves the button to the right as it does so.

: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>