1

I'm working on an HTML project that requires two boxes aligned horizontally, and within each box there's a Title, subtitle, and a paragraph. In both boxes, the Titles are similar in length, and they both only take one line. However, the subtitle in the second box is much longer than the first, therefore the paragraph in the second box is not aligned with the paragraph in the first box (The paragraph in the first box is higher - since the subtitle takes one line not two lines). These are the two boxes

This is the code I have written (sorry if it's messy):

.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;
}
<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;">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;">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>
j08691
  • 204,283
  • 31
  • 260
  • 272
Daniel Halabi
  • 53
  • 1
  • 1
  • 5
  • And the problem is...? – j08691 Oct 26 '21 at 16:30
  • I want the paragraphs in both divs to start on the same level (to be aligned). – Daniel Halabi Oct 26 '21 at 16:32
  • 1
    That is not possible using CSS only. You second div knows nothing about any other one. The only option you have is to give the subheading a `min-height` that accounts for two lines. And that will still leave you with undesirable layouts when another subheading is three lines, or in a different scenario all subheadings are suddenly one-line only. – connexo Oct 26 '21 at 16:36
  • Also, your whole page should not have more than one `h1` element. This element is intended to host text that describes the whole page. Start using different heading levels, properly building up on each other. Also stop using inline styles. – connexo Oct 26 '21 at 16:47
  • If you are open to some little JavaScript to solve the problem . I have added a javascript solution to above question – Rana Oct 26 '21 at 16:59

0 Answers0