Resize div after word-break - html

Question

I have a React component which should return a <h1> with an position: absolute <div> as accent after the first word-break:
e.g. First example (accent cube positioned fine)
e.g. Second example (accent cube should be positioned right after "SIT")
Since I want to use this component for several projects and different text lengths, I am trying to find a dynamic solution rather than setting the CSS on each of the accent cubes.
Am I missing an CSS property? Or is JS necessary to recalculate the <div> after word-breaks?
Have already tried inline, etc. But the gap (between text and div) on some word-breaks still persist.
Acceptance criteria: Text comes from CMS and would like to make the component take a string without the need for special characters: e.g. |,etc. to replace with the cube div
My code so far (with Tailwind):
type IHeadingProps = {
text: string | JSX.Element;
classList?: string;
url?: string;
cube?: "small" | "base" | "large";
onClick?: () => {};
};
const Heading = ({ text, classList, cube, url, onClick }: IHeadingProps) => {
const headingClasses = classList
? classList
: "text-4xl xl:text-6xl uppercase";
let cubeDivSize;
if (cube === "small") {
cubeDivSize = "h-3 w-3 lg:h-4 lg:w-4 xl:h-5 xl:w-5";
} else if (cube === "base") {
cubeDivSize = "h-4 w-4 lg:h-5 lg:w-5 xl:h-6 xl:w-6";
} else if (cube === "large") {
cubeDivSize = "h-5 w-5 lg:h-6 lg:w-6 xl:h-7 xl:w-7";
}
const cubeDiv = (
<div
className={`absolute right-[-1rem] -top-3 rounded-sm bg-levaro-primary lg:right-[-1.5rem] lg:-top-4 xl:-top-5 xl:rounded ${cubeDivSize}`}
data-testid="accent-cube"></div>
);
if (url) {
return (
<h1 className={`${cube && "relative inline-block"} ${headingClasses}`}>
<a href={url}>
{text}
{cube && cubeDiv}
</a>
</h1>
);
} else {
return (
<h1
className={`${cube && "relative inline-block"} ${headingClasses}`}
onClick={onClick}>
{text}
{cube && cubeDiv}
</h1>
);
}
};
export default Heading;
Thanks in advance!