title: How assign the width of the longest element to other elements
body: <p>I have the following element</p>
  
  <p><a href="https://i.stack.imgur.com/QIHC2.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QIHC2.png" alt="enter image description here"></a></p>
  
  <p>The exercise names are dynamic so the width of the button containing the exercise name will vary but the the accompanying color button is fixed width. The parent element has <code>width: auto; height: auto</code> to it will fit to however many buttons there are regardless of how long the exercise name is. </p>
  
  <p><strong>How can I make the length all of the buttons equal to the width of the widest exercise name button?</strong> </p>
  
  <p>Or similarly, <strong>how can I get these buttons to align but not overflow, even if longer exercise names are chosen.?</strong></p>