Have multiple elements with different parents have same width as widest

Note that for items in a list or with otherwise the same parent there are existing questions such as this one – However they don’t cover what I’m asking as they all cover items in a table or otherwise sharing a parent.

I have multiple buttons on my page and due to some frankly boneheaded design decisions made 20 years ago they’re all in different containers that I can’t touch.

Example:

<button class="myButton">really long text means really wide button</button>
<!-- elsewhere, under a different parent -->
<button class="myButton">small button</button>
<!-- even further away parented to yet another element -->
<button class="myButton">kinda medium text</button>

How can I, in either CSS or plain JavaScript, make all of the buttons the width of the widest one? The number of buttons varies but is thankfully determined before the page is rendered, and the text is known ahead of time (e.g. the widest button will always say “really long text means really wide button”) so it doesn’t need to account for dynamic changes and could even be some hardcoded hacky method (although accounting for dynamic changes would be more useful for future readers).