虫眼鏡アイコンをクリックしても検索フォームが出てこない

-Ruby on Railsのバージョン:7.2.1
-Rubyのバージョン:3.3.5

Rails初学者です。
備忘録として記載します。

上記の虫眼鏡アイコンをクリックしたら、

のように検索ボックスを表示するようにしたかったが、クリックしても表示されない事象が起きた
コードを下記に記載する

<div class="search_container">
  <div class="search_icon" onclick="toggleSearch()">
    <i class="fas fa-search"></i><!-- Font Awesomeの虫眼鏡アイコン -->
  </div>
  <div class="search-form hidden">
    <%= form_with url: search_path, class: "form-inline", data: { turbo: false } do |f| %>
      <%= f.text_field :word, placeholder: "検索", class: "search-input" %>
      <%= f.submit "検索", class: "btn-search" %>
    <% end %>
  </div>
</div>

<script>
  function toggleSearch() {
    const searchForm = document.querySelector('.search-form');
    if (searchForm) {
    searchForm.classList.toggle('hidden');
    }
  }
</script>

.search-container {
  position: relative;
}

.search-icon {
  cursor: pointer;
  font-size: 20px;
  color: #333;
}

.search-icon:hover {
  color: #555;
}

/* 検索フォーム */
.search-form {
  position: absolute;
  top: 0;
  right: 100;
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.hidden {
  display: none;
}

.search-input {
  border: none;
  outline: none;
  font-size: 16px;
  padding: 5px;
  margin-right: 10px;
}

.btn-search {
  background-color: #007bff;
  color: white;
  border: none;
  padding: 5px 10px;
  border-radius: 5px;
  cursor: pointer;
}

.btn-search:hover {
  background-color: #0056b3;
}

結論

.search-form {
  position: absolute;
  top: 100%;　←こいつが変なことしてた、消したら動作してほしい挙動になった
  left: 0;
  display: flex;
  align-items: center;
  background-color: #fff;
  border: 1px solid #ccc;
  border-radius: 5px;
  padding: 5px 10px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

.search-formの中でposition: absolute;を使用しているので、基準となるのは親要素である.search-containerになる。
これに対して、フォームの位置をtopやrightで指定してるが親要素を基準にtop: 100%を指定したことによってフォームが変なところにいっちゃったみたい。
あと％で指定してたからってのもあるっぽい。

指摘等あればお願いします。