Make the span element inside div clickable

Question

I have a dropdown list using javascript. Inside my div I have a span element with the text for the div, because I want to show/hide the text according to the screen size. As I added the span element the span area is not clickable. Other parts in that div are clickable and show the menu, except for the area with the span. How to make the span clickable as well?

Here's my code:

<div onclick="dropDownFunction()" class="dropbtn"><span>My List &nbsp;</span> <i class="fa fa-arrow-circle-down" aria-hidden="true"></i></div>

And my codepen: http://codepen.io/nfds89/pen/MyLGKR

Answer 1

An alternate CSS-only solution is to pass through clicks on the <span> and <i>

.dropbtn span,
.dropbtn i {
  pointer-events: none;
}