Как скрывать весь элемент целиком, а не только отдельную его часть?

Question

Anastasia Tovma @sernato

Python Junior Developer

Как скрывать весь элемент целиком, а не только отдельную его часть?

Я хочу сверстать поисковую строку, которая после клика на неё будет расширяться и показывать выпадающее меню с историей предыдущего поиска. На данный момент есть элемент (слева) - строка поиска в состоянии "1" и справа - вариант раскрывающейся строки+меню. Но у меня нет идей почему этот скрипт работает только для нижней строки, а не для всего "правого" элемента полностью.
Объяснила такое себе, надеюсь хоть что-то понятно..
Если есть идеи - буду благодарна за направление:)

<div class="wrap">
  <div onclick="myFunction()"  class="dropbtn">
    <p>Поиск...</p>
  </div>
  <div class='logo'></div>
  <div>
    <input class="open-search" placeholder="  Поиск..." />
    <button class="button">x</button>
    <div id="myDropdown" class="dropdown-content">
      <a href="#">Введите слово для поиска...</a>
    </div>
  </div>
  
</div>

.wrap{
  margin: 20px;
}
p{
  margin-left: 40px;
  line-height: 10px;
  color: #BABABA;
}
.dropbtn{
  width: 225px;
  height: 40px;
  background-color: #F2F2F2;
  border:2px solid #F2F2F2;
  border-radius: 50px 50px;
}
.logo{
  position: absolute;
  left: 265px;
  top: 20px;
  height: 40px;
  width: 40px;
  background-color: #F2F2F2;
  border:2px solid #F2F2F2;
  border-radius: 100%;
}
.open-search{
  position: absolute;
  top: 20px;
  height: 40px;
  width: 475px;
  left: 350px;
  width: 475px;
  box-shadow: none;
  border:2px solid #F2F2F2;
  border-radius: 10px 10px 0 0 ;
  outline:none;
  padding-left: 30px;
  color: #8D8D8D;
  // display: none;
}
.button{
  position: absolute;
  top: 32px;
  left: 830px;
  background-color: #fff;
  border: none;
  color: #8D8D8D;
}
.open-search-line{
  position: absolute;
  top: 62px;
  height: 40px;
  width: 507px;
  left: 350px;
  box-shadow: none;
  border:2px solid #F2F2F2;
  border-radius: 0 0 10px 10px;
  outline:none;
  color: #8D8D8D;
  z-index: 10;
  background-color: #fff;
}
.dropdown-content {
  margin-left: 330px;
  display: none;
  position: absolute;
  background-color: #fff;
  min-width: 510px;
  border-radius: 0 0 10px 10px;
  box-shadow: 0px 4px 8px 0px rgba(0,0,0,0.2);
  z-index: 1;
}
.dropdown-content a {
  color: #AFAFAF;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
}
.show {display:block;}

function myFunction() {
  document.getElementById("myDropdown").classList.toggle("show");
}
window.onclick = function(event) {
  if (!event.target.matches('.dropbtn')) {
    var dropdowns = document.getElementsByClassName("dropdown-content");
    var i;
    for (i = 0; i < dropdowns.length; i++) {
      var openDropdown = dropdowns[i];
      if (openDropdown.classList.contains('show')) {
        openDropdown.classList.remove('show');
      }
    }
  }
}