title: JavaScript button click not executing fast enough
body: <p>Look following example. Click on reset button, you will get console log 1 so you can confirm its working.</p>
  <p>When you click search field, it will expand, making buttons float to new line (including reset button). Now if you try to click reset button while its in new line, the transition which closes search field will execute faster than the click on the reset button. Not a major problem but intriguing. Is this expected behavior?</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-js lang-js prettyprint-override"><code>document.querySelector(".reset").addEventListener("click", function(e) {
    console.log(1)
  });</code></pre>
  <pre class="snippet-code-css lang-css prettyprint-override"><code>.wrap {
    max-width: 700px;
  }
  
  .a {
    padding: 10px 50px;
    background: #ccc;
    display: inline-flex;
  }
  
  .filter {
    width: 50px;
    transition: all 0.1s;
  }
  
  .filter:focus {
    width: 250px;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div class="wrap"&gt;
    &lt;input type="search" class="filter"&gt;
    &lt;div class="a"&gt;button 1&lt;/div&gt;
    &lt;div class="a"&gt;button 2 &lt;/div&gt;
    &lt;div class="a"&gt;button 3&lt;/div&gt;
    &lt;div class="a reset"&gt;reset&lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>