title: How to position <detail> marker to come after <summary>
body: <p>I have several data items, some of which have <strong>Details</strong> &amp; <strong>Summary</strong> tags, which reveal extra input options. Standard HTML puts the details marker on the left, which breaks the alignment. I would like to move the details marker to come after the Summary text. In the image below, I would like to move the triangle to the right of &quot;Title: Book Club&quot;</p>
  <p><a href="https://i.stack.imgur.com/3Dx90.png" rel="noreferrer"><img src="https://i.stack.imgur.com/3Dx90.png" alt="enter image description here" /></a>
  <a href="https://i.stack.imgur.com/pdYnZ.jpg" rel="noreferrer"><img src="https://i.stack.imgur.com/pdYnZ.jpg" alt="enter image description here" /></a></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-html lang-html prettyprint-override"><code>&lt;details&gt;
  &lt;summary&gt; Title: Book Club&lt;/summary&gt;
  This revealed area tells more about the course and maybe has a form in it.
  &lt;/details&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Related: <a href="https://stackoverflow.com/questions/49924024/how-to-properly-position-the-arrow-in-details-css">How to properly position the arrow in &lt;details&gt; CSS</a></p>