Align items in flexbox to items in another flexbox [duplicate] - html

Question

This question already has answers here:
Align child elements of different blocks
(3 answers)
Closed 2 years ago.
I'm developing a simple webpage with elements of flexbox. In one section I have logos of project with description to them. Unfortunately, all of the projects have logos in a different size. How can I receive the result as on picture?
My current code (HTML)
<div id="Projects">
<a href="http://www.project1.com">
<div id="ProjectL">
<img class="img-responsive" src="{% static 'images/logos/project1.png' %}" alt="project" style=" margin-left: auto; max-width: 200px; align-items: flex-start;">
<div id="desk" style="align-items: flex-end;"> Project ONE</div>
</div>
</a>
<a href="http://www.project2.com">
<div id="ProjectL">
<img class="img-responsive" src="{% static 'images/logos/project2.png' %}" alt="project" style=" margin-left: 35px; max-width: 200px; align-items: flex-start;">
<div id="desk" style="align-items: flex-end;">Project TWO</div>
</div>
</a>
<a href="http://www.project3.com">
<div id="ProjectL">
<img class="img-responsive" src="{% static 'images/logos/project3' %}" alt="project" style=" margin-left: 35px; max-width: 200px; align-items: flex-start;">
<div id="desk" style="align-items: flex-end;"> PROJECT THREE</div>
</div>
</a>
<a href="http://www.project4.com">
<div id="ProjectL">
<img class="img-responsive" src="{% static 'images/logos/project4' %}" alt="project" style=" margin-left: 35px; margin-right: auto; max-width: 200px; align-items: flex-start;">
<div id="desk" style="align-items: flex-end;"> Project FOUR</div>
</div>
</a>
</div>
CSS
#Projects {
display: flex;
flex-direction: row;
font-family: sans-serif;
padding-bottom: 40px;
}
#ProjectL {
display: flex;
flex-direction: column;
font-family: sans-serif;
padding-bottom: 40px;
}

Answer 1

I created a really quick Codepen with a solution that works if you know that your logos aren't going to have heights higher than the container I called projects__item-top. Maybe you could set a maximum size for the logos?
Here's the code:
HTML
<div class="projects">
<a class="projects__item" href="www.link.com" aria-label="Project 1">
<div class="projects__item-top">
<img src="https://source.unsplash.com/random/200x60" alt="" />
</div>
<div class="projects__item-description">
<h3>Description 1</h3>
<p>Lorem ipsum dolor sit amet</p>
</div>
</a>
<a class="projects__item" href="www.link.com" aria-label="Project 2">
<div class="projects__item-top">
<img src="https://source.unsplash.com/random/200x50" alt="" />
</div>
<div class="projects__item-description">
<h3>Description 2</h3>
</div>
</a>
<a class="projects__item" href="www.link.com" aria-label="Project 3">
<div class="projects__item-top">
<img src="https://source.unsplash.com/random/200x70" alt="" />
</div>
<div class="projects__item-description">
<h3>Description 3</h3>
</div>
</a>
</div>
CSS
html * {
box-sizing: border-box;
}
.projects {
display: flex;
flex-direction: row;
}
.projects__item {
display: flex;
flex-direction: column;
margin: 10px;
padding: 10px;
}
.projects__item-top {
display: flex;
height: 120px;
align-items: center;
}
I noticed you were using id where you should be using class. An id has to be unique but a class can be re-used.
I hope this helps! Let me know if you have any other issues with it.

Answer 2

I've made this layout add your content inside of it:
HTML
<div class="container">
<div class="project">
<div class="logo-wrapper1">
<div class="logo1">logo 1</div>
</div>
<div class="description-wrapper">
<div class="description">Description 1</div>
</div>
</div>
<div class="project">
<div class="logo-wrapper2">
<div class="logo2">logo 2</div>
</div>
<div class="description-wrapper">
<div class="description">Description 2</div>
</div>
</div>
<div class="project">
<div class="logo-wrapper3">
<div class="logo3">logo 3</div>
</div>
<div class="description-wrapper">
<div class="description">Description 3</div>
</div>
</div>
</div>
CSS
* {
box-sizing: border-box;
}
.container {
display: flex;
padding: 10px;
border: 1px solid red;
height: 300px;
}
.project {
display: flex;
flex-direction: column;
border: 1px solid red;
padding: 10px;
margin-right: 10px;
}
.logo-wrapper1, .logo-wrapper2, .logo-wrapper3 {
display: flex;
align-items: center;
padding: 10px;
height: 100px;
}
.logo1 {
display: flex;
align-items: center;
border: 1px solid black;
height: 100%;
width: 100%;
}
.logo2 {
display: flex;
align-items: center;
border: 1px solid black;
height: 50%;
width: 100%;
}
.logo3 {
display: flex;
align-items: center;
border: 1px solid black;
height: 80%;
width: 100%;
}
.description-wrapper {
margin-top: 10px;
padding: 10px;
height: 100px;
border: 1px solid black;
}