Css how to start paragraph text after the largest heading end vertically?

Question

Is there a way to vertical-align text after the largest heading ends?

Attaching a screenshot for ref. This is but I am looking for

I have tried with justify-content:space-between and then it looks like this but this is not expected.

Codepen URL: https://codepen.io/mukeysh/pen/XWZgdWZ

.container {
  display: flex;
  max-width: 1170px;
  margin: auto;
}
.card {
  align-items: center;
  box-shadow: 0px 2px 8px rgb(0 0 0 / 10%);
  margin-right: 30px;
  max-width: 400px;
  padding: 30px;
  justify-content: space-between;
  flex: 0 1 33%;
}

.card img {
  margin: auto;
}
.card-intro {
  text-align: center;
}

<div class="container">
  <div class="card">
    <div class="card-intro">
      <img src="https://via.placeholder.com/150">
      <h2>Nunc egestas augue at pellentesque</h2>
    </div>
    <div class="card-body">
      <p>Vivamus elementum semper nisi. Fusce ac felis sit amet ligula pharetra condimentum. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Nulla consequat massa quis enim.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-intro">
      <img src="https://via.placeholder.com/150">
      <h2>Nunc egestas augue at pellentesque Nunc egestas augue at pellentesque</h2>
    </div>
    <div class="card-body">
      <p>Vivamus elementum semper nisi. Fusce ac felis sit amet ligula pharetra condimentum. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Nulla consequat massa quis enim.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-intro">
      <img src="https://via.placeholder.com/150">
      <h2>Nunc egestas augue at pellentesque Nunc egestas augue at pellentesque</h2>
    </div>
    <div class="card-body">
      <p>Vivamus elementum semper nisi. Fusce ac felis sit amet ligula pharetra condimentum. Integer ante arcu, enim.</p>
    </div>
  </div>
</div>

Is there a way to align the text after the heading without any min-height to the heading?

Can you look into this solution: https://codepen.io/sparxia/pen/VwQWaOv I have added grid + nested flexbox to align. — m4n0, May 20 '22 at 07:04

score 1 · Answer 1 · answered May 20 '22 at 07:07

Maybe something like this. giving the h2 a specific height will allow the other one to be at the same space and by calling them on media query you can specify their height.

.container {
  display: flex;
  max-width: 1170px;
  margin: auto;
}
.card {
  align-items: center;
  box-shadow: 0px 2px 8px rgb(0 0 0 / 10%);
  margin-right: 30px;
  max-width: 400px;
  padding: 30px;
  justify-content: space-between;
  flex: 0 1 33%;
}

.card img {
  margin: auto;
}
.card-intro {
  text-align: center;
}

.card-intro h2 {height:100px;}

@media only screen and (max-width: 959px){

.card-intro h2 {height:150px;}
}

<div class="container">
  <div class="card">
    <div class="card-intro">
      <img src="https://via.placeholder.com/150">
      <h2>Nunc egestas augue at pellentesque</h2>
    </div>
    <div class="card-body">
      <p>Vivamus elementum semper nisi. Fusce ac felis sit amet ligula pharetra condimentum. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Nulla consequat massa quis enim.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-intro">
      <img src="https://via.placeholder.com/150">
      <h2>Nunc egestas augue at pellentesque Nunc egestas augue at pellentesque</h2>
    </div>
    <div class="card-body">
      <p>Vivamus elementum semper nisi. Fusce ac felis sit amet ligula pharetra condimentum. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Nulla consequat massa quis enim.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-intro">
      <img src="https://via.placeholder.com/150">
      <h2>Nunc egestas augue at pellentesque Nunc egestas augue at pellentesque</h2>
    </div>
    <div class="card-body">
      <p>Vivamus elementum semper nisi. Fusce ac felis sit amet ligula pharetra condimentum. Integer ante arcu, enim.</p>
    </div>
  </div>
</div>

score 0 · Answer 2 · edited May 20 '22 at 07:24

Here is the solution by Javascript.

equalheight = function(container){

var currentTallest = 0,
     currentRowStart = 0,
     rowDivs = new Array(),
     $el,
     topPosition = 0;
 $(container).each(function() {

   $el = $(this);
   $($el).height('auto')
   topPostion = $el.position().top;

   if (currentRowStart != topPostion) {
     for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
       rowDivs[currentDiv].height(currentTallest);
     }
     rowDivs.length = 0; // empty the array
     currentRowStart = topPostion;
     currentTallest = $el.height();
     rowDivs.push($el);
   } else {
     rowDivs.push($el);
     currentTallest = (currentTallest < $el.height()) ? ($el.height()) : (currentTallest);
  }
   for (currentDiv = 0 ; currentDiv < rowDivs.length ; currentDiv++) {
     rowDivs[currentDiv].height(currentTallest);
   }
 });
}

$(window).load(function() {
  equalheight('.card-intro');
});


$(window).resize(function(){
  equalheight('.card-intro');
});

.container {
  display: flex;
  max-width: 1170px;
  margin: auto;
}
.card {
  align-items: center;
  box-shadow: 0px 2px 8px rgb(0 0 0 / 10%);
  margin-right: 30px;
  max-width: 400px;
  padding: 30px;
  justify-content: space-between;
  flex: 0 1 33%;
}

.card img {
  margin: auto;
}
.card-intro {
  text-align: center;
}

<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<div class="container">
  <div class="card">
    <div class="card-intro">
      <img src="https://via.placeholder.com/150">
      <h2>Nunc egestas augue at pellentesque</h2>
    </div>
    <div class="card-body">
      <p>Vivamus elementum semper nisi. Fusce ac felis sit amet ligula pharetra condimentum. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Nulla consequat massa quis enim.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-intro">
      <img src="https://via.placeholder.com/150">
      <h2>Nunc egestas augue at pellentesque Nunc egestas augue at pellentesque</h2>
    </div>
    <div class="card-body">
      <p>Vivamus elementum semper nisi. Fusce ac felis sit amet ligula pharetra condimentum. Integer ante arcu, accumsan a, consectetuer eget, posuere ut, mauris. Vestibulum facilisis, purus nec pulvinar iaculis, ligula mi congue nunc, vitae euismod ligula urna in dolor. Nulla consequat massa quis enim.</p>
    </div>
  </div>
  <div class="card">
    <div class="card-intro">
      <img src="https://via.placeholder.com/150">
      <h2>Nunc egestas augue at pellentesque Nunc egestas augue at pellentesque</h2>
    </div>
    <div class="card-body">
      <p>Vivamus elementum semper nisi. Fusce ac felis sit amet ligula pharetra condimentum. Integer ante arcu, enim.</p>
    </div>
  </div>
</div>

Thank you for your help. I am looking for without JS. – Mukeysh May 20 '22 at 07:18 — Mukeysh, May 20 '22 at 07:18

Css how to start paragraph text after the largest heading end vertically?

2 Answers2