I’m working on a React project using Tailwind CSS. My buttons feature arrows (<-) positioned outside, aligned towards the center of the button’s right border with some space between them. Currently:

Buttons with shorter text display arrows correctly.
Longer text causes arrows to misalign, disrupting the design.
Design Flow:

Arrows (<-) are positioned outside each button.
They should align dynamically to the center of the right border of the button, maintaining a consistent visual distance.

Challenge: How can I adjust arrow alignment dynamically in React with Tailwind CSS, ensuring they stay centered along the right edge of buttons regardless of text length? I need to preserve the space between buttons and arrows as part of the design.

Here’s the relevant code for button component and arrow alignment:

import DiscoveryButton from '../DiscoveryButton/DiscoveryButton';

const RightSection = ({ responses, activeResponse, handleButtonClick }) => {
  return (
    <div className="grid grid-cols-[80%_20%] relative">
    {/* Button Grid */}
    <div className="grid grid-cols-1 items-start  space-y-4">
      {responses.map((response, index) => (
        <DiscoveryButton
          key={index}
          index={index}
          active={activeResponse === index}
          onClick={handleButtonClick}
        />
      ))}
    </div>

    {/* Navigation Arrows */}
    <div className="grid grid-cols-1 mt-2 pl-2  justify-center relative">
      {responses.map((response, index) => (
        // VERTICAL LINE HERE
        <div
          key={index}
          className="relative w-full pt-[--pt] bg-[image:linear-gradient(#000,#000),linear-gradient(#000,#000)] bg-[position:0_calc((theme(fontSize.base.1.lineHeight)*.5)-1px+var(--pt)),100%_var(--y,0%)] bg-[length:100%_2px,2px_var(--h,100%)] bg-no-repeat [--pt:theme(padding.4)] first:[--pt:0%] first:[--y:calc(theme(fontSize.base.1.lineHeight)*.5)] last:[--h:calc((theme(fontSize.base.1.lineHeight)*.5)+var(--pt))]"
        >
          {/* Poistioning of Arrow head */}
          <svg
            className="translate-y-[calc((theme(fontSize.base.1.lineHeight)-24px)*.75)]"
            width="16.8"
            height="24"
            viewBox="0 0 16.8 24"
            fill="none"
          >
            {/* ARROW HEAD HERE */}
            <path
              d="M0 12l12 12 1.4-1.4L4.2 12 13.4 3.4 10 0l-12 12z"
              fill="currentColor"
            />
          </svg>
          {index === 2 && (
            <div class="absolute left-full top-[--pt] h-[2px] bg-black w-5 mt-[11px]" />
          )}
        </div>
      ))}
    </div>
    </div>
  );
};

export default RightSection;

Any CSS or JavaScript techniques that help achieve this dynamic alignment while respecting the design’s space requirement would be greatly appreciated.