title: Icon does not rotate when toggle
body: <p>With PURE CSS I am trying to expand and close a button. It works so far well, but my icon does not rotate 90 degrees how I like it. Why not and how to fix?
  Also what I cannot figure out is that when after clicking to expand and clicking back on the button, it does not close. But when you click outside the button area then it does close, why and how to fix?</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-css lang-css prettyprint-override"><code>.expand .icon-right {
      position: relative;
  }
  
  .expand:focus+.explain {
      display: block;
  }
  
  .expand:active+.explain {
    display: none;
  }
  
  .expand:focus &gt; .fas fa-caret-right {
      transition: .3s transform ease-in-out;
      transform: rotate(90deg);
  }
  
  .explain {
      display: none;
      overflow: hidden;
  }
  
  .explain p {
      display: inline;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;link rel="stylesheet" href="https://use.fontawesome.com/releases/v5.5.0/css/all.css" integrity="sha384-B4dIYHKNBt8Bc12p+WXckhzcICo0wtJAoU8YZTY5qE0Id1GSseTk6S+L3BlXeVIU" crossorigin="anonymous"&gt;
  &lt;div class="q"&gt;
             &lt;button class="expand"&gt;&lt;i class="fas fa-caret-right"&gt;&lt;/i&gt;yes or no&lt;/button&gt;
                  &lt;div class="explain"&gt;&lt;p&gt;whatever you say&lt;/p&gt;
      &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>