Styling summary tag in HTML

Issue

I'm very new to using HTML and recently came across the details and summary tags. I tried styling the summary, but using heading or <p> shifted the text away from the arrow.

Specifically, I wanted to make the summary larger, so I used a <p> inside the summary. However, this caused the arrow to show above the text - the following code can replicate this

<details>
  <summary>
    <p style="font-size:20px">Example</p>
  </summary>
  Inside text
</details>

Solution

p Tag is an block element thats what makes the arrow shift to a new line, in order to achieve your diserd result change the p tag to inline or use inline element instead such as span

<details>
  <summary>
    <p style="font-size:20px; display:inline">Example</p>
  </summary>
  Inside text
</details>

Answered By - mmh4all