How to make Search bar slide from right to left - css

Question

This search bar now expands from left to right while hover or click. How to modify it, so it expands from right to left. CSS Only, no JS. I want to place this on the right side of the page.
Please help in modifing this code so it expands from the right to left.
Now, when the bar is sticky to the right side, it shakes a bit while expanding. Changing expand direction will remove shake effect.
.search-sticky {
position: sticky;
top: 30px;
left: 100%;
z-index: 55;
border-radius: 50px;
background-color: red;
padding: 2.5rem;
}
.search-icon {
position: relative;
width: 24px;
height: 24px;
flex-shrink: 0;
top: 3px
}
.search-input {
outline: none;
border: none;
background: none;
width: 0;
padding: 0;
color: white;
float: left;
transition: .3s;
line-height: 1.5;
font-size: 6rem;
position: relative;
left: 1rem;
}
.search-btn {
float: right;
width: 40px;
height: 40px;
border-radius: 50px;
display: flex;
justify-content: center;
align-items: center;
text-decoration: none;
transition: .3s;
}
.search-input:focus,
.search-input:not(:placeholder-shown) {
width: 200px;
}
.search-box:hover>.search-input {
width: 200px;
}
.search-box:hover>.search-btn,
.search-input:focus+.search-btn,
.search-input:not(:placeholder-shown)+.search-btn {
background: grey;
}
.search-sticky:hover,
.search-sticky:focus-within {
background-color: grey;
}
.search-sticky button {
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
<div class="search-sticky">
<form class="search-box">
<input type="text" name="q" id="search-query" class="search-input" placeholder="Search ....">
<a class="search-btn" href="#">
<button type="submit" class="search-button"><img class="search-icon" alt="Search" src="/icons/search.svg" /></button>
</a>
</form>
</div>

Answer 1

Updated
I hope this helps
.search-sticky {
position: sticky;
top: 30px;
left: 100%;
z-index: 55;
border-radius: 50px;
background-color: whitesmoke;
padding: 0.5rem 2.5rem;
}
.search-box{
display: flex;
justify-content: space-between;
align-items: center;
}
.search-icon {
position: relative;
width: 40px;
height: 40px;
margin-left: auto;
}
.search-input {
outline: none;
border: none;
background: none;
width: 0;
padding: 0;
color: white;
transition: .3s;
line-height: 1.5;
font-size: 4rem;
position: relative;
display: inline-block;
}
.search-btn {
width: 40px;
height: 40px;
border-radius: var(--br-md);
display: inline-block;
justify-content: center;
align-items: center;
text-decoration: none;
transition: .3s;
}
.search-input:focus,
.search-input:not(:placeholder-shown) {
width: calc(100% - 60px);
}
.search-box:hover>.search-input {
width: calc(100% - 60px);
}
/*.search-box:hover>.search-btn,
.search-input:focus+.search-btn,
.search-input:not(:placeholder-shown)+.search-btn {
background: grey;
}
// not needed */
.search-sticky:hover,
.search-sticky:focus-within {
background-color: lightgray;
}
.search-sticky button {
padding: 0;
background: none;
border: none;
border-radius: 0;
outline: none;
-webkit-appearance: none;
-moz-appearance: none;
appearance: none;
cursor: pointer;
}
<div class="search-sticky">
<form class="search-box">
<input type="text" name="q" id="search-query" class="search-input" placeholder="Search ....">
<a class="search-btn" href="#">
<button type="submit" class="search-button"><img class="search-icon" alt="Search" src="https://img.icons8.com/ios-filled/2x/search.png" /></button>
</a>
</form>
</div>