Align card contents with other card contents (photo) - html

Question

Today I've faced with specific design: there is row of cards and text inside card is aligned with another text from other cards. So title is aligned with title from other cards, text is aligned with other texts. It is very difficult for me to explain it clearly so I make a screenshot of the thing I'm trying to reach
By now I'm ready to completely ignore this issue due to impossibility of realization by pure css, but who knows, may be there is some solution?
UPDATE: I'm sorry for lack of explanation. Here is the code. My aim is to make the same alignment as in screeenshot above without using <br>s and fixed heights.
.list {
display: flex;
}
.item {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
width: 120px;
padding: 10px;
background-color: #fff;
border-radius: 10px;
text-align: center;
background-color: rebeccapurple;
color: #fff;
}
.item>* {
flex: 0 0 auto;
}
.item>*+* {
margin-top: 10px;
}
.item+.item {
margin-left: 20px;
}
.icon {
background-color: red;
border-radius: 100%;
width: 20px;
height: 20px;
}
.title {
text-transform: uppercase;
font-weight: bold;
}
.text {
float: left;
clear: left;
}
<div class="list">
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor sit amet.</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, amet.</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum.</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor.</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
</div>
Thanks in advance.

Answer 1

What you are trying to do can be easily achieved using CSS grids and a bit of HTML restructuring.
The other way to do this would be to give fixed heights to your text elements.
If you are not familiar with CSS grids and don't like the idea of giving fixed heights to your elements, you can achieve similar result by using a little bit of JavaScript. Check the attached snippet.
I have written a small function equalizeClass() to equalize heights of all the elements belonging to a particular class. What it does is basically scans through all the elements belonging to a particular class and finds the element with maximum height. It then sets the heights of all the elements equal to the calculated maximum height.
Don't forget to call equalize() every time you update your related DOM elements.
I have not changed anything in your HTML structure.
In CSS, I have just added justify-content to your item class.
justify-content: space-between;
function equalizeClass(className) {
var images = document.getElementsByClassName(className);
var max_height = 0;
for (var i = 0; i < images.length; i++) {
if (images[i].clientHeight > max_height) {
max_height = images[i].clientHeight;
}
}
for (var i = 0; i < images.length; i++) {
images[i].style.height = max_height + 'px';
}
}
function equalize() {
equalizeClass("title");
equalizeClass("text");
}
window.addEventListener("orientationchange", equalize());
window.addEventListener('resize', equalize());
.list {
display: flex;
}
.item {
flex: 0 0 auto;
display: flex;
flex-direction: column;
align-items: center;
justify-content: space-between;
width: 120px;
padding: 10px;
background-color: #fff;
border-radius: 10px;
text-align: center;
background-color: rebeccapurple;
color: #fff;
}
.item>* {
flex: 0 0 auto;
}
.item>*+* {
margin-top: 10px;
}
.item+.item {
margin-left: 20px;
}
.icon {
background-color: red;
border-radius: 100%;
width: 20px;
height: 20px;
}
.title {
text-transform: uppercase;
font-weight: bold;
}
.text {
float: left;
clear: left;
}
<div class="list">
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor sit amet.</div>
<div class="text">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Est, amet.</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum.</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor.</8>
</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
<div class="item">
<div class="icon"></div>
<div class="title">Lorem ipsum dolor sit amet, consectetur.</div>
<div class="text">Lorem ipsum dolor sit amet</div>
</div>
</div>

Answer 2

You need to make your title div a fixed height, ideally a height that is taller than the title text itself. See the code below for your title div:
.title {
text-transform: uppercase;
font-weight: bold;
height: 100px;
max-width: 100%;
}
Then give your text div this style:
.text{
display: flex;
justify-content: center;
align-items: top;
}
See this pen.