Align child elements of different blocks

A little bit of JavaScript can help out . By getting the maximum height , you can define that to all classes

function textHeight() {
  var reed = document.getElementsByClassName("titles")

  let lengths = Array.from(reed).map(e => e.offsetHeight);
  let max = Math.max(...lengths);

  for (let i = 0; i < reed.length; i++) {
    reed[i].style.minHeight = max + "px"
  }
}
textHeight();
.kind-words {
  margin-top: 3%;
  margin-left: 10%;
  margin-right: 10%;
  display: flex;
}

.word {
  background-color: #F5F5F5;
  float: left;
  width: 50%;
  margin-left: 1%;
  margin-right: 1%;
  padding-left: 5%;
  padding-right: 5%;
  padding-top: 3%;
  padding-bottom: 3%;
  border: solid 1px #B1976B;
  display: flex;
  flex-flow: column;
}
<div class="kind-words" style="margin-bottom: 4%;">
  <div class="word">
    <h1 style="text-align: center; font-family: avenirNext; font-size: 30px; color: #B1976B;">Mark D. Griffith</h1>
    <h1 style="text-align: center; font-family: avenirNext; font-size: 20px; color: #B1976B;" class="titles">Griffith & Associates</h1>
    <h1 style="text-align: center; text-align:justify;  font-family: avenirnext; font-size: 20px; line-height: 1.5em; color: #54595F;">I would not try any level criminal allegation regarding sexual assault without the help of Dr. Pierce. I have tried many of these cases and the most valuable asset when I do is Dr. Pierce. He has testified in many of my cases with the outcome being
      the two word verdict my client so badly needs. The most clear and concise witness I have ever used. I have come to the point where I feel the only way to be truly effective is to have him on our team when we go to trial. He is approachable, understanding,
      and infinitely knowledgeable.
    </h1>
  </div>
  <div class="word">
    <h1 style="text-align: center; font-family: avenirNext; font-size: 30px; color: #B1976B;">Katheryn H. Haywood
    </h1>
    <h1 style="text-align: center;  font-family: avenirNext; font-size: 20px; color: #B1976B;" class="titles">The Law Office of<br> Katheryn H. Haywood, PLLC </h1>
    <h1 style="text-align: center;  text-align:justify; font-family: avenirnext; font-size: 20px; line-height: 1.5em; color: #54595F;">Dr. Pierce is my ONLY expert for child abuse cases. He is a national leader in understanding false accusations based on fear of the boogey man/family dynamics/hyper-sensitivity to touching based on past trauma. I have been doing sex defense work for
      20 years. Dr. Pierce is the expert I rely on to help me understand the intricacies of my cases. He is a straight shooter. And perhaps more importantly, he speaks very well to juries in common language which is clear, concise, and not elitist. I
      have 5 cases pending with Dr. Pierce and have yet to lose one where he has consulted/testified.
    </h1>
  </div>
</div>

Leave a Comment