title: Making the content inside grid items equal height in CSS Grid
body: <p>I am trying to figure out how to get two columns of my grid the same height. Here is what I am after:</p>
  
  <pre>
  xxxxxxxxxxxxxxxxx &nbsp; xxxxxxxxxxxxxxxxxxx <br/>
  x qqqqqqqqqqqqq x  &nbsp; x qqqqqqqqqqqqqqq x <br/>
  x qqqqqqqqqqqqq x  &nbsp; x qqqqqqqqqqqqqqq x <br/>
  x               x  &nbsp; x qqqqqqqqqqqqqqq x <br/>
  x               x  &nbsp; x qqqqqqqqqqqqqqq x <br/>
  xxxxxxxxxxxxxxxxx &nbsp; xxxxxxxxxxxxxxxxxxx <br/>
  </pre>
  
  <p>This is where the x's represent a border of a grid (display: grid) and the q's are labels and input fields.
  Here is all the code and a link to the same on codepen.</p>
  
  <pre><code>.container {
      font-family: Arial, Helvetica, Sans-Serif;
      color: #666;
      font-size: 12px;
      position: absolute;
      width: 100%;
      margin: 0 auto;
      border: 1px solid #666;
      background-color: #fff;
      height: 100%;
  }
  
  .outerGrid {
    display: grid;
    grid-template-columns: 1fr 2fr 3fr 1fr;
    grid-template-rows: 80px 1fr 1fr 30px;
    grid-gap: 20px;
    grid-template-areas: 
      "title title title title" 
      ". companyInfo contactInfo . "
      ". demoInfo demoInfo . " 
      "footer footer footer footer";
  }
  
  .companyInfoContainer {
    grid-area: companyInfo;
  }
  
  .companyInfoBox {
      padding: 20px;
      border: 1px solid #666;
  }
  
  .contactInfoContainer {
      grid-area: contactInfo;
  }
  
  .contactInfoBox {
      display: grid;
      grid-template-columns: 1fr 1fr;
      grid-template-rows: auto;
      grid-gap: 20px;
      grid-template-areas: 'contactLeft contactRight';
      border: 1px solid #666;
      padding: 20px;
  }
  
  .titleRow {
    display: flex;
    -webkit-box-pack: justify;
    justify-content: space-between;
    align-content: flex-start;
    margin-bottom: 10px;
    color: #333;
    font-size: 16px;
  }
  
  .formControl {
      -webkit-transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
      display: block;
      height: 37px;
      padding: 5px;
      line-height: 1.25;
      background-color: #fff;
      width: 100%;
      background-clip: padding-box;
      border: 1px solid rgba(0,0,0,.15);
      border-radius: .25rem;
      transition: border-color ease-in-out .15s,box-shadow ease-in-out .15s,-webkit-box-shadow ease-in-out .15s;
      margin-bottom: 5px;
      background-image: none;
  }
  
  .formTitleTop {
      margin-bottom: 10px;
  }
  
  .formTitle {
      margin: 10px 0;
  }
  </code></pre>
  
  <p>...and the html:</p>
  
  <pre><code>&lt;div class='container'&gt;
    &lt;div class="outerGrid"&gt;
      &lt;div class="companyInfoContainer"&gt;
        &lt;div class="titleRow"&gt;
          &lt;div&gt;Company Information&lt;/div&gt;
          &lt;div&gt;* Required&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="companyInfoBox"&gt;
          &lt;div class="formTitleTop"&gt;Company Name*&lt;/div&gt;&lt;input type="text" class="formControl" value=""&gt;
          &lt;div class="formTitle"&gt;Website (leave blank if not website)&lt;/div&gt;
          &lt;input type="text" class="formControl" value=""&gt;&lt;/div&gt;
      &lt;/div&gt;
      &lt;div class="contactInfoContainer"&gt;
        &lt;div class="titleRow"&gt;
          &lt;div&gt;Contact Information&lt;/div&gt;
          &lt;div class="required"&gt;* Required&lt;/div&gt;
        &lt;/div&gt;
        &lt;div class="contactInfoBox"&gt;
          &lt;div class="contactLeft"&gt;
            &lt;div class="formTitleTop"&gt;First Name*&lt;/div&gt;&lt;input type="text" class="formControl" value=""&gt;
            &lt;div class="formTitle"&gt;Last Name*&lt;/div&gt;&lt;input type="text" class="formControl" value=""&gt;
            &lt;div class="formTitle"&gt;Role*&lt;/div&gt;&lt;input type="text" class="formControl" value=""&gt;&lt;input type="button" value="Add Additional Contacts"&gt;&lt;/div&gt;
          &lt;div class="contactRight"&gt;
            &lt;div class="formTitleTop"&gt;Phone Number*&lt;/div&gt;&lt;input type="text" class="formControl" value=""&gt;
            &lt;div class="formTitle"&gt;Mobile Phone Number&lt;/div&gt;&lt;input type="text" class="formControl" value=""&gt;
            &lt;div class="formTitle"&gt;Email Address*&lt;/div&gt;&lt;input type="text" class="formControl" value=""&gt;&lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p>codepen: <a href="https://codepen.io/GuitarJ/pen/QqZRYR" rel="noreferrer">https://codepen.io/GuitarJ/pen/QqZRYR</a></p>
  
  <p>I can't seem to get the left column to stretch to the height of the right col's height (which I think is the row height too. I was hoping that css grids would have a way to do this, but its hard to search for this exact issue.</p>
  
  <p>I also tried setting the height to 100%, but then it didn't respect the grid-gap and went down too far.</p>
  
  <p>How can I make the left side be the row height?</p>