Utilizing Flexbox to arrange different content in a panel, there is an issue with the positioning of icons within each panel. The fourth icon wraps around and aligns with the first one at the top of its container, instead of lining up with the third icon at the bottom (as shown in the green ideal position).
To get a clearer visualization of this problem, you can check out the demonstration on Codepen.
If you look at the code snippet provided:
* {
font-family: sans-serif;
}
.wrapper {
display: flex;
align-items: flex-start;
width: 500px;
background-color: #F9F9F9;
padding: 10px;
position: relative;
}
.image {
width: 150px;
margin-right: 1em;
}
.row {
display: flex;
flex-direction: column;
flex: 1 0 0;
}
.more {
font-weight: bold;
margin-top: 1em;
display: flex;
flex-direction: column;
flex-wrap: wrap;
height: 4em;
}
.ideal {
position: absolute;
bottom: 20px;
right: -44px;
}
.ideal span {
color: green;
font-weight: bold;
opacity: .2;
margin-right: 4em
}It functions perfectly for desktop view. However, the query lies in finding a CSS style that can be applied specifically through a media query without altering the HTML structure. As a novice in Flexbox, I am seeking assistance in identifying a rule that can force the fourth icon to the bottom of its container.
Any guidance or solution on resolving this issue would greatly help!