'Equal width + height responsive divs with hover overlay

I'm having trouble getting the heights on my divs to match up. I need them to match the heights of the div with the most content - which is normally easy BUT I'm doing this with overlays that also contain more text. I can't do it with fixed heights or widths because I need the layout to be responsive. The cells need to basically be col-md-2 with the tallest height as the text wraps, it would be more like a square, col-sm-6 would be long and narrow, and col-xs-12 would also be long and narrow.

It doesn't HAVE to be bootstrap, but it needs to have that effect. The other kicker is that I need to do as much of this inline as possible, because I'm delivering it to a client to paste into their drupal site without having much access to the backend, so please ignore my gross inline code.

I've almost got it, the overlays work, and the heights are being determined by the content, but I just can't get the heights to match up to the longest one. Can anyone see what I'm doing wrong here??

#table{ 
    display: table;
    border-collapse: collapse;
    width: 100%;
}
.tr{ 
    display: table-row; 
}
.td{ 
    display: table-cell;
    vertical-align: top;
    text-align: center;
    height: 100%;
    }
    

.overlay {
  position: absolute;
  vertical-align: middle;
  top: 50%;
  left: 50%;
  height: 100%;
  width: 100%;
  background-image: url('https://premium.wpmudev.org/blog/wp-content/uploads/2015/02/fullwidth-small.png');
  background-position: center top;
  background-size: 500% auto;
  opacity: 1;
  transition: .5s ease;
}

.overlay:hover {
  opacity: 0;
}

.text {
  color: white;
  height: 100%;
  top: 50%;
  left: 50%;
  font-size: 20px;
  position: absolute;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
  opacity: 1;
}

.text:hover {
  opacity: 0;
  transform: translate(-50%, -50%);
  -ms-transform: translate(-50%, -50%);
  text-align: center;
 
}

.cell {
  font-size: 14px;
  
}

<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
</head>
<body>

<div id="table" style="width: 100%">
        <div class="td col-md-12" style="background-image: url('https://premium.wpmudev.org/blog/wp-content/uploads/2015/02/fullwidth-small.png');
  background-position: center top;
  background-size: 500% auto;  text-align: center; padding-top: 10%; padding-bottom: 10%">test</div>
    </div>
   
<div id="table">    
   

 
    
        <div class="td col-md-2 col-md-offset-1 col-sm-6 col-xs-12" 
        style="color: #0169A9;  -webkit-box-shadow:inset 0px 0px 0px 6px #0169A9; -moz-box-shadow:inset 0px 0px 0px 6px #0169A9;
    box-shadow:inset 0px 0px 0px 6px #0169A9;       font-size: 14px;
    font-weight: bold;
    margin-top: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1.2;">To find out more about the making of this toolkit, click here
        <div class="overlay text">
         Test this
      </div>
      </div>
      
      
      
        <div class="td col-md-2 col-sm-6 col-xs-12"  style="color: #0169A9;  -webkit-box-shadow:inset 0px 0px 0px 6px #0169A9; -moz-box-shadow:inset 0px 0px 0px 6px #0169A9;
    box-shadow:inset 0px 0px 0px 6px #0169A9;       font-size: 14px;
    font-weight: bold;
    margin-top: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1.2;">To find out more about the making of this toolkit
        <div class="overlay text">
         Test this
      </div>
      </div>
        
        
        <div class="td col-md-2 col-sm-6 col-xs-12"  style="color: #0169A9;  -webkit-box-shadow:inset 0px 0px 0px 6px #0169A9; -moz-box-shadow:inset 0px 0px 0px 6px #0169A9;
    box-shadow:inset 0px 0px 0px 6px #0169A9;       font-size: 14px;
    font-weight: bold;
    margin-top: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1.2;">To find out more about the making of this toolkit, click here toolkit, click here
        <div class="overlay text">
         Test this
      </div>
      </div>
        
        
        
       <div class="td col-md-2 col-sm-6 col-xs-12"  style="color: #0169A9;  -webkit-box-shadow:inset 0px 0px 0px 6px #0169A9; -moz-box-shadow:inset 0px 0px 0px 6px #0169A9;
    box-shadow:inset 0px 0px 0px 6px #0169A9;       font-size: 14px;
    font-weight: bold;
    margin-top: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1.2;">To find out more about the making of this toolkit, click here
        <div class="overlay text">
         Test this
      </div>
      </div>
        
        
        
       <div class="td col-md-2 col-sm-6 col-xs-12"  style="color: #0169A9;  -webkit-box-shadow:inset 0px 0px 0px 6px #0169A9; -moz-box-shadow:inset 0px 0px 0px 6px #0169A9;
    box-shadow:inset 0px 0px 0px 6px #0169A9;       font-size: 14px;
    font-weight: bold;
    margin-top: 15px;
    padding-top: 15px;
    padding-bottom: 15px;
    line-height: 1.2;">To find out more about the making of this toolkit, click here
        <div class="overlay text">
         Test this
      </div>
      </div>
        
        
       
        <div class="clear-all">
         </div>

    
</div>
</body>

Solution 1:^[1]

Sorry i was busy, here's a working example:

//we need to iterate through row childs
$('.row').each(function() {
    //Set a var to store the highest height
    var maxHeight = 0;
    //Then, we iterate through all cols inside the row, searching for the highest one.
    $('.col-xs-4', this).each(function() {
        if($(this).height() > maxHeight) {
         maxHeight = $(this).height();  
        }
    });
    //Now, we have the height value of the highest one, so we can apply this height to all row childs.
    $('.col-xs-4', this).each(function() {
        $(this).height(maxHeight); 
     });
});

.col-xs-4{
border: 1px solid black;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">


<div class="container-fluid">
  <div class="row">
    <div class="col-xs-4">
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
    <div class="col-xs-4">
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
    <div class="col-xs-4">
      <p>text</p>
      <p>text</p>
      <p>text</p>
      <p>text</p>
    </div>
  </div>
</div>

Solution 2:^[2]

We can use flex-box property for this, for more details please refer at https://css-tricks.com/snippets/css/a-guide-to-flexbox/

for demo practice please visit https://demos.scotch.io/visual-guide-to-css3-flexbox-flexbox-playground/demos/enter link description here

Sources

This article follows the attribution requirements of Stack Overflow and is licensed under CC BY-SA 3.0.

Source: Stack Overflow

Solution	Source
Solution 1
Solution 2	Kavinrajsi

'Equal width + height responsive divs with hover overlay

Solution 1:[1]

Solution 2:[2]

Sources

Related Questions

Solution 1:^[1]

Solution 2:^[2]