Tengo un proyecto que usa componentes básicos de React que se compilan en Vanilla JS y HTML con Babel. Lo que quiero hacer es poder obtener el ancho de los botones cuando se procesan (pueden variar según la cantidad de texto que tengan) y usar el valor de ancho más largo en el elemento principal para poder configurar ambos botones para que sean ese mismo ancho quiero que el CtaContainer sea responsable de establecer el ancho del botón para que sea el mismo y alinearlos en consecuencia. No puedo establecer un ancho fijo ya que esto solo sucederá cuando haya más de un botón en el contenedor

Así que primero tengo este 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> );};

Entonces tengo un componente CtaButton

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

Y por ultimo tengo el CtaContainer

 const CtaContainer = ({children}) => { const childRef = useRef(null) useEffect(() => { if(children.length > 1) { } }); return ( <div> {children} </div> );};