How to ignore child element active region when parent:active is enable?

I'm programming a to-do list with react. In CSS i made li:active to cause height expanding animation, however i've already programmed the <span>x </span> to have onClick to delete the corresponding item. My problem is that span is a children of li, and every time i click it, it'll cause a micro animation because it resides in the same space as li. Not sure what approach can i do to fix this.

this is the list structure:

<ul>
 <li>
to-do text
  <span> X </span>
 </li>
</ul>

full code at codesandbox