我的下拉按钮出现在搜索栏的后面

<input type="text" id="search-bar" placeholder="搜索...">
<button id="dropdown-btn">下拉按钮</button>

<div class="container">
  <input type="text" id="search-bar" placeholder="搜索...">
  <button id="dropdown-btn">下拉按钮</button>
</div>

.container {
  display: flex;
  align-items: center;
}

#search-bar {
  flex: 1;
}

<div id="container">
  <input type="text" id="search-bar" placeholder="搜索...">
  <button id="dropdown-btn">下拉按钮</button>
</div>

const container = document.getElementById('container');
const searchBar = document.getElementById('search-bar');
const dropdownBtn = document.getElementById('dropdown-btn');

container.insertBefore(dropdownBtn, searchBar);