Выдвигающиеся строка некорректно отображается

const button_search = document.getElementById("button_search");
var icon_search = document.getElementById("icon_search");
var input_search = document.getElementById("input_search");

function animation(element) {
  element.style.display = 'flex';
  element.style.width = "0%";

  var width = 0;
  var id = setInterval(frame, 100);

  function frame() {
    if (width >= 100) {
      clearInterval(id);
    } else {
      width++;
      element.style.width = width + '%';
    }
  }
}

function func_for_player_search() {
  if (input_search.style.display === "none") {
    icon_search.style.display = "flex";
    input_search.style.display = "flex";

    animation(input_search);
  } else {
    icon_search.style.display = "none";
    input_search.style.display = "none";
  }
}

<header style="background-color: #806950; color: #fae7b4; padding: 20px; border: 2px solid #756537; display: flex; justify-content: space-between; align-items: center; border-radius: 10px;">
  <h1 style="font-family: Arial, sans-serif; font-size: 36px;">Название вашего сайта</h1>
  <div id="search-bar" style="display: flex; justify-content: flex-end; align-items: center; gap: 20px; flex: 1;">
    <div id="player-search" style="width: 100%; display: flex; align-items: center;">
      <button id="button_search" style="background-color: #fae7b4; color: #806950; border: 2px solid #756537; padding: 10px 10px; font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; border-radius: 5px 5px 5px 5px; white-space: nowrap;">Поиск игроков</button>
      <input id="input_search" type="text" style="display: none; width: 0%; background-color: #fae7b4; color: #806950; border: 2px solid #756537; font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; border-radius: 0px 5px 5px 0px; margin-left: auto">
      <div id="icon_search" style="display: none; padding: 10px 15px; font-size: 16px; background-image: url({{ url_for('static', filename='image.bmp') }}); background-size: 100% 100%; color: #fae7b4; border: 2px solid #756537; border-left: none; border-radius: 0px 5px 5px 0px;">0</div>
    </div>
    <div id="match-search">
      <button style="background-color: #fae7b4; color: #806950; border: 2px solid #756537; padding: 10px 10px; font-family: Arial, sans-serif; font-size: 16px; font-weight: bold; border-radius: 5px; white-space: nowrap;">Поиск матчей</button>
    </div>
  </div>
</header>