Columns of the same height (multiple) of the same height

advertisements

I am trying to create HTML layout with foundation. My code is as below:

<div class="row" data-equalizer>

      <div class="medium-3 columns" data-equalizer-watch>
      <div class="callout" data-equalizer-watch>
<h2>Locations</h2>
</div>
</div>
 <div class="medium-9 columns" data-equalizer-watch>
 <div class="callout" data-equalizer-watch>

     <div class="row  relationship-model">
     <div class="medium-12 columns" >
     <div class="callout">
     <h2>Categories</h2>
      </div>
     </div>
          </div>
 <div class="row  relationship-model">
      <div class="medium-12 columns">
       <div class="callout">
     <h2>Location Current Request</h2>
     </div>
      </div>
            </div>

 </div>
 </div>
</div>

output of above HTML as below:

While I want it as below:

I want left or right side columns to be of same height. I can do it with table but need same height and responsive.


You can do this with Flexbox

.content {
  display: flex;
  color: red;
}
.left,
.box {
  border: 1px solid #C3C3C3;
  padding: 20px;
  margin: 5px;
}
.right {
  display: flex;
  flex-direction: column;
  flex: 4;
}
.left {
  flex: 1;
}
<div class="content">
  <div class="left">Lorem</div>
  <div class="right">
    <div class="box">Lorem</div>
    <div class="box">Lorem</div>
  </div>
</div>