title: How to match <div> heights across two stacks of <div>'s to create pseudo table with just CSS?
body: <p>I have two &quot;columns&quot; of stacked <code>&lt;div&gt;</code>s that are side by side, and there are an equal number of <code>&lt;div&gt;</code>s in each column.  Each <code>div</code> is equivalent to a table row.  However, since it's not a true table, if one <code>div</code> in the left stack/column has more lines of content than its corresponding <code>div</code> in the right column the &quot;rows&quot; will not be aligned.  I am wondering how I could set the height of the <code>div</code>s to match to each other.</p>
  <p><a href="https://i.stack.imgur.com/yWlNM.png" rel="nofollow noreferrer">Here is a picture of the issue.</a> You can see where the row splits in the third row.</p>
  <p>This is set up on a Mediawiki farm and due to some constraints from that and from the extensions used, I cannot access the html here or create a real table here, and am hoping for a CSS-only solution.  I've looked at using <code>calc()</code> and variables in a stylesheet, as well as <code>display:table</code> but I can't wrap my head around it.</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-html lang-html prettyprint-override"><code>&lt;!--The Header --&gt;
  &lt;section class="pi-item pi-group pi-border-color pi-collapse" data-item-name="itemAttributes"&gt;
    &lt;h2 class="pi-item pi-header pi-secondary-font pi-item-spacing pi-secondary-background"&gt;Attributes&lt;/h2&gt;
  
  &lt;!--The first column --&gt;
  
    &lt;section class="pi-item pi-group pi-border-color" data-item-name="itemAttributeNames"&gt;
      &lt;div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability1name"&gt;
        &lt;div class="pi-data-value pi-font"&gt;Darkvision&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability2name"&gt;
        &lt;div class="pi-data-value pi-font"&gt;Thick Skin&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability3name"&gt;
        &lt;div class="pi-data-value pi-font"&gt;Invulnerability&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability4name"&gt;
        &lt;div class="pi-data-value pi-font"&gt;Shapeshift&lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  
  &lt;!--The second column--&gt;
  
    &lt;section class="pi-item pi-group pi-border-color" data-item-name="itemAttributesDesc"&gt;
      &lt;div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability1"&gt;
        &lt;div class="pi-data-value pi-font"&gt;The helm allows the wearer to see in dim light.&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability2"&gt;
        &lt;div class="pi-data-value pi-font"&gt;Grants immunity to poison.&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability3"&gt;
        &lt;div class="pi-data-value pi-font"&gt;Grants immunity to wounds. This is a pretty big deal. Like, super over powered. Someone should write to the editor. Or call them. Call right now so we can get some clarification on what the heck is going on here. We need answers. #wtf&lt;/div&gt;
      &lt;/div&gt;
  
      &lt;div class="pi-item pi-data pi-item-spacing pi-border-color" data-source="ability4"&gt;
        &lt;div class="pi-data-value pi-font"&gt;The helm gives the wearer the ability to take any form.&lt;/div&gt;
      &lt;/div&gt;
    &lt;/section&gt;
  &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>For current CSS I just have the two sections set to 50% width and float left (along with other non-relevant things).</p>