Block width increase direction?

Question

I have a header that consists of three parts. The header is set to display: flex and justify-content is set to space-between.

I want the input element to increase when focused without moving other elements in the header.

.header {
  display: flex;
  justify-content: space-between;
  padding: 30px;

}

.search__input {
  width: 60px;
  transition: width 0.1s ease;
}

.search__input:focus {
  width: 200px;
}

<header class="header">

  <div>Left</div>

  <div>Center</div>

  <div class="header__search">
    <input class="search__input" placeholder="Search" />
  </div>

</header>

I was thinking about position: absolute when focused, but I don't know how to realize it.

Answer 1

I solved this problem myself using position: absolute and float: right.

.header {
  display: flex;
  justify-content: space-between;
  padding: 30px;

}
.header__search {
  position: relative;
  width: 60px;
}
.search__input {
  position: absolute;
  right: 0;
  width: 60px;
  transition: width 0.1s ease;
}

.search__input:focus {
  width: 200px;
}

<header class="header">

  <div>Left</div>

  <div>Center</div>

  <div class="header__search">
    <input class="search__input" placeholder="Search" />
  </div>

</header>