JSFiddle - React, Tailwind, and code Playground

by Vladimir

HTML

<div class="main">
  <div class="row2">
    <div class="lg">xfgvcbvseerererererrerererererxxfghjgjgx</div>
    <div class="lg-in">xfgvcbvsererererererx</div>
    <div class="md">xfgvcbvseerererererrerererererx</div>
</div> 
<div class="row2">
    <div class="lg">xcbvseerererererrerererererxxfghjgjgx</div>
    <div class="lg-in">xfgvcbvererererx</div>
    <div class="md">xfgvcbvseereerrerererererx</div>
</div> 
</div>

CSS

.row2 div {
  width: 50px;
  float: left;
  margin: 2px;
  border: 1px solid #000;
  word-wrap: break-word;
}

JavaScript

var classes = ["lg", "lg-in", "md"];
var requiredHeight = window.getComputedStyle(document.querySelector(".row2 .lg")).height;

classes.forEach(function(cls) {
  	document.querySelectorAll("." + cls).forEach(function(item) {
    	item.style.height = requiredHeight;
    });
});