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

I realized the main problem was using float:right, so after removing that, adding display:inline-flex to allow the search div to be on the same row as the navbar and using only transform:translate(x,y) for positioning purposes it now works! :)

Answer 2

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>

Answer 3

Redesigned the styles and added the following behavior:

1. The input field remains open:

   • on hover;
   • with focus and caret in it;
   • if there is entered text.

2. The search button is active only if any text is entered.

.search {
  position: relative;
  float: right;
  margin-right: 250px;
  border-radius: 40px;
  overflow: hidden;
  background-color: orange;
}

.search input {
  height: 40px; width: 0;
  padding: 5px 40px 5px 0;
  border: none; outline: none;
  box-sizing: border-box;
  background-color: transparent;
  cursor: pointer;
  transition: 0.2s;
}

.search input:not(:placeholder-shown),
.search input:focus, .search:hover input {
  width: 200px;
  padding: 5px 40px 5px 1em;
  cursor: unset;
}

.btn {
  position: absolute;
  top: 0; right: 0;
  height: 40px; width: 40px;
  border-radius: 20px;
  background-color: tomato;
  cursor: pointer;
  pointer-events: none;
}

.search input:not(:placeholder-shown)+.btn {
  pointer-events: auto;
}

.btn i {
  position: relative;
  top: 10px; left: 10px;
}

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

Answer 4

Change only in below css

.search{
    border-radius: 40px;
    height:40px;
    background-color: orange;
   float:left;
   transform: translate(580px,0px);

}

First of all you have to set search panel at left side then you need to set translate() 580px or more or less.