title: How to calculate a div's width and make all their sibilings adopt the biggest size so that they look consistent using CSS?
body: <p>I want to make several divs containing diferent strings () length inside. I want them to fit to the content, but this pose a problem: one of the various divs will contain a larger string, hence, It will be bigger in width than the others, and when applying a border, it looks awful.</p>
  <p>I've been practicing some HTML and CSS in jsbin and did this code:</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>html,body{
    padding:0!important;
    margin:0!important;
  }
  
  .padre{
    border:2px solid violet;
    width: -moz-fit-content;
    width: -o-fit-content;
    width:-webkit-fit-content;
    width: fit-content;
    
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  
  &lt;head&gt;
    &lt;meta charset="utf-8"&gt;
    &lt;meta name="viewport" content="width=device-width"&gt;
    &lt;title&gt;JS Bin&lt;/title&gt;
  
  &lt;/head&gt;
  
  &lt;body&gt;
    
    &lt;div class="padre"&gt;
      &lt;div class="hijo"&gt;
        &lt;h4 id="gato"&gt;El gato.&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="hijo"&gt;
        &lt;h4 id="gato"&gt;La Firefox.&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="hijo"&gt;
        &lt;h4&gt;El gato pulpo.&lt;/h1&gt;
      &lt;/div&gt;
      &lt;div class="hijo"&gt;
        &lt;h4&gt;La turritopsis nutrícula.&lt;/h1&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  
      &lt;div class="padre"&gt;
        &lt;div class="hijo"&gt;
          &lt;h4 id="gato"&gt;El perro.&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="hijo"&gt;
          &lt;h4 id="gato"&gt;La vaca.&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="hijo"&gt;
          &lt;h4&gt;El lobo aguila.&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="hijo"&gt;
          &lt;h4&gt;La caravana h.&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="padre"&gt;
        &lt;div class="hijo"&gt;
          &lt;h4 id="gato"&gt;El mono.&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="hijo"&gt;
          &lt;h4 id="gato"&gt;La dragon.&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="hijo"&gt;
          &lt;h4&gt;La serpiente.&lt;/h1&gt;
        &lt;/div&gt;
        &lt;div class="hijo"&gt;
          &lt;h4&gt;El caballo.&lt;/h1&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    
  &lt;/body&gt;
  
  &lt;/html&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>:</p>
  <p>But as you can see, they don't look consistent because I'm using <code>width:fit-content</code> instead of a fixed width.</p>
  <p>Is there a way using pure CSS to calculate the biggest div's width and apply that width to others?</p>