Looking to achieve centered text for a summary where the arrow, when clicked, reveals additional details. However, currently, the text and arrow are on separate lines.
The goal is to have the arrow on the same line as the summary text and perfectly centered together. The details should then be aligned to the left.
Desired Outcome: https://i.stack.imgur.com/9ykDc.png
Possible Solutions:
Several attempts were made in the source code, but all resulted in an extra line break after the arrow.
.center {
text-align: center;
display: block;
margin-left: auto;
margin-right: auto;
}<p>
<details>
<summary>
<div class="center">
Some summary in center
</div>
</summary>
<div>
<p>
Some more details
</p>
</div>
</details>
</p>