JSFiddle - React, Tailwind, and code Playground

by Jim_Toth

HTML

<div class="wrap">
test
<div class="content">

  <div class="left">
    left
  </div>
  
  
  <div class="mid">
  
<br>content here<br>content here<br>content here<br>content here<br>content here<br>content here<br>content here<br><br>content here<br>content here<br>content here<br>content here<br>content here<br>content here<br>content here<br><br>content here<br>content here<br>content here<br>content here<br>content here<br>content here<br>content here<br><br>content here<br>content here<br>content here<br>content here<br>content here<br>content here<br>content here<br><br>content here<br>content here<br>content here<br>content here<br>content here<br>content here<br>content here<br><br>content here<br>content here<br>content here<br>content here<br>content here<br>content here<br>content here<br>
  </div>
  <div class="right">
    right
  </div></div>
</div>

<div class="wrap">
content here<br>content here<br>content here<br>
  <div class="left">
    left
  </div>
  
  <div class="mid">
  test
  </div>
  
  <div class="right">
    right
  </div>
</div>

<div class="wrap">
content here<br>content here<br>content here<br>
  <div class="left">
    left
  </div>
  
  
  <div class="mid">
  test
  </div>
  <div class="right">
    right
  </div>
</div>

CSS

.wrap{
  position: relative;
  background: black;
  color: white;
  border-bottom: 30px solid #fff;
  margin: 30px;
}

.left{
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  background: orange;
  color: black;
  margin-left: -25px;
}

.right{
  position: absolute;
  right: 50px;
  top: 50%;
  transform: translateY(-50%);
  background: yellow;
  color: black;
}

.mid{
  position: absolute;
  left: 150px;
  top: 0;
  background: blue;
  color: black;
  margin-right: 150px;
}

.content{
  margin-left: 40px;
  padding-right: 70px;
}

.clearfix:after {
  content: "";
  display: table;
  clear: both;
}

JavaScript

var biggestHeight = 0;
// Loop through elements children to find & set the biggest height
$(".wrap *").each(function(){
 // If this elements height is bigger than the biggestHeight
 if ($(this).height() > biggestHeight ) {
   // Set the biggestHeight to this Height
   biggestHeight = $(this).height();
 }
});

// Set the container height
$(".wrap").height(biggestHeight);