I have 3 questions on this code I am using from bootstrap 5.

[JSFiddle](https://jsfiddle.net/se14nh5y/)

1. How do I align the header to the center of the button?

```
 <button class="accordion-button collapsed text-center" type="button" data-bs-toggle="collapse" data-bs-target="#collapseOne" aria-expanded="false" aria-controls="collapseOne">
 <h2>ABC</h2><br /><p>Date Time</p>
 </button>

```

I tried inserting text-center to accordion-header and accordion-button but still, it is not aligned.

2. How do I remove the arrow on the right?

I inspected the element and realized that it is in :: after which could not be seen in the HTML code. I like to check if I can move this by doing some CSS tweak?

3. Any idea how i can introducce a line break bewtween the `<h2>ABC</h2>`and the `<p>Date Time</p>`? i tried adding `<br />` but still doesnt separate them.

I have seen some examples for bootstrap 4 and it works to an extent but in bootstrap 5, certain classes changed the name and it is way more stubborn.

Thanks in advance.