title: How to set same dynamic width of component child for all instances? Web Components
body: <p>Assume I have a small component in a web application that represents an expander control, i.e. a header text, an icon to expand / collapse and some content.</p>
  
  <p>A very simple React implementation (pseudo code) could look like this:</p>
  
  <pre><code>const Expander = ({children, title, onExpandToggle, isExpanded}) =&gt; (
    &lt;div&gt;
      &lt;div&gt;&lt;span&gt;{title}&lt;/span&gt;&lt;img src={...} onClick={onExpandToggle} /&gt;&lt;/div&gt;
      {isExpanded &amp;&amp; children}
    &lt;/div&gt;
  );
  </code></pre>
  
  <p>This implementation shows the icon after the title, so the position of the icon is determined by the length of the title.</p>
  
  <p>It could look something like this:<br>
  <a href="https://i.stack.imgur.com/PtJ5U.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/PtJ5U.png" alt="Example"></a></p>
  
  <p>Now assume that there are multiple like this below each other. It becomes messy:<br>
  <a href="https://i.stack.imgur.com/9GWM5.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/9GWM5.png" alt="Example messy"></a></p>
  
  <p>To make this cleaner, all icons should have the same padding from left. The padding should not be fixed but dynamic, so that the longest title determines the position of all icons:<br>
  <a href="https://i.stack.imgur.com/QvQoR.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/QvQoR.png" alt="Example clean"></a></p>
  
  <p>Assuming that I want to keep the expander in its own component, is there a CSS way to achieve my goal?</p>
  
  <p>So far, I haven't tried anything as I don't have a starting point. In WPF I would have used something like <a href="https://stackoverflow.com/questions/7558795/how-can-i-make-my-grid-columns-always-be-the-same-width"><code>SharedSizeGroup</code></a>, but this doesn't exist for CSS.</p>