I have this situation, with two seperated card components, and it is nesseserly to add both headings same height.
Is it possible using only CSS?
<div class="card">
<div class="card__head">
<h4 class="heading4 c-white">
Heading
</h4>
</div>
<div class="card__body">
<p class="paragraph">
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Quisque quis commodo mauris.
</p>
</div>
</div>
simple no by pure css you can not do this. you have to put fixed height which is not feasible. best way to go is matchHeight js and using display:inline-block; and vertical-align:middle.
1) you apply div structure and css according to codepen using inline-block. keep in mind that both title are in different columns
<div class="fa-title"><h4>heading 1</h4></div>
<div class="fa-title"><h4>heading 2</h4></div>
<style>
.fa-title{text-align:center;}
.fa-title h4{display:inline-block; vertical-align:middle;}
.fa-title h4::before,
.fa-title h4::after{content:""; display:inline-block; vertical-align:middle; height:100%; white-space:nowrap;}
</style>
2) apply js to that div for common height of both div.
`$('.fa-title').mathcHeight();`
You want same height heading and if title is bigger then you need to hide overflow title text part using css.
You can use this css properties for heading section:
overflow:hidden;
text-overflow: ellipsis;
white-space: nowrap;
