I have a project that uses basic React components that are compiled to vanilla JS and HTML with Babel. What I want to do is to be able to get the width of the buttons when they render (they can vary depending on the amount of text they have) and use the longest width value in the parent element so I can set both buttons to be that same width I want the CtaContainer to be responsible for setting the width of the button to be the same and aligning them accordingly. I can't set a fixed width as this will only happen when there is more than one button in the container

So first I have this index.js

const Index = () => {
return (
    <div>
        <h1 className={"hl-boldXL"}>Hey</h1>
        <p className={"copy-regularXL"}>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Accusantium animi aspernatur, beatae culpa eius esse in incidunt ipsa, iusto laborum optio placeat porro quam quo, suscipit veniam vero vitae! Dicta?</p>
        <CtaContainer>
            <CtaButton type={"primary"} url={"https://www.someurl.com"} text={"Primary"}/>
            <CtaButton type={"secondary"} url={"https://www.someurl.com"} text={"Secondary"}/>
        </CtaContainer>
    </div>
);};

Then I have a CtaButton component

const CtaButton = (props) => {

return (
    <a className={props.type} href={props.url} title={props.text}>{props.text}</a>
);};

And lastly I have the CtaContainer

const CtaContainer = ({children}) => {
const childRef = useRef(null)

useEffect(() => {
    if(children.length > 1) {
    }
});

return (
    <div>
        {children}
    </div>
);};