How to close a dynamically created dropdown list?

Question

I have a .hidden class in my CSS file and I toggle the class when the user clicks an ellipsis button which reveals a dropdown list. The list should disappear when the user clicks anywhere on the window. This is the HTML created dynamically:

<div class="dropdown">
         <span class="options"><i class="fa-solid fa-ellipsis-vertical"></i></span>
          <div id="myDropdown" class="dropdown-content hidden">
            <a href="#"><i class="fa-solid fa-pen"></i> Edit workout</a>
            <a href="#"><i class="fa-solid fa-circle-minus"></i> Delete workout</a>
            <a href="#"><i class="fa-solid fa-trash"></i> Clear all workouts</a>
          </div>
</div>

Below is the method that toggles the .hidden class which works fine but will become unable to remove the .hidden after I call the method which should add the .hidden class back

containerWorkouts.addEventListener('click', function (e) {
      const items = containerWorkouts.querySelector('.dropdown-content');
      if (e.target.classList.contains('fa-ellipsis-vertical')) {
        items.classList.remove('hidden');
      }
      
    });

Below is the method that adds the .hidden class back to hide the list

sidebarContainer.addEventListener('click', function(e){
      const dropdown = sidebarContainer.querySelector('.dropdown');
      const items = containerWorkouts.querySelector('.dropdown-content');
  
      if (!dropdown.classList.contains(e.target)) {
        if (!items.classList.contains('hidden')) {
          items.classList.add('hidden');
        }
      }
    }