Align title text in collapse in the middle

[bogdan]

I am trying to align a text in collapse in the center, but chevron arrow takes some space and title is set a little to the right from the center. Is it possible to make arrow have a absolute position and text to be exactly in the center?

https://play.tailwindcss.com/L2yalFmJcY

<div tabindex="0" class="collapse-arrow collapse m-5 border border-base-300 bg-base-100 text-center max-w-128">
  <div class="collapse-title font-semibold bg-red-400">
    Middle
    </div>
  <div class="collapse-content text-sm">Click the "Sign Up" button in the top right corner and follow the registration process.</div>
</div>

I tried pl-X, but it only works if the title is not dynamic (like comming from backend data).