I'm trying to achieve a specific layout on my codepen page, where the <div class="item__boxes"> element is displayed at the bottom of the <div class="item">. However, I've run into some issues and need help with the implementation.
Question:
How can I ensure that the <div class="item__boxes"> element stays at the bottom of the <div class="item"> regardless of the content inside?
Goals:
- Make sure there is always padding/margin between the text in
<div class="item__text">and the<div class="item__boxes">. - Ensure that the
<div class="item__boxes">is consistently positioned at the bottom of the<div class="item">across different screen sizes.
Current Issue:
https://i.sstatic.net/kqpBX.png
Desired Output:
https://i.sstatic.net/gfQlX.jpg
Code:
.item {
position: relative;
}
.item__wrapper {
max-width: 50%;
position: relative;
}
.item__img img {
width: 100% !important;
}
.item__text {
position: absolute;
background: rgba(238, 238, 238, 0.5);
padding: 64px;
top: 0;
right: 0;
bottom: 0;
left: 0;
z-index: 5;
display: flex;
flex-direction: column;
justify-content: center;
}
.item__boxes {
background-color: #ccc;
display: flex;
position: absolute;
bottom: 0;
}
.col-padding {
padding: 16px;
}
.col-m-12 {
width: 100%;
}
@media (min-width: 1024px) {
.col-t-6 {
width: 50%;
}
}<div class="item__wrapper">
<div class="item">
<div class="item__img">
<picture>
<source media="(min-width: 1300px)" srcset="https://placeimg.com/1000/480/nature">
<source media="(min-width: 1024px)" srcset="https://placeimg.com/960/480/nature">
<img src="https://placeimg.com/640/480/nature" alt="Flowers" style="width:auto;">
</picture>
</div>
<div class="item__text">
<h3>Some title</h3>
<p>Efficiently communicate sticky quality vectors after compelling growth strategies. Compellingly scale future-proof content rather than enterprise users. Uniquely build scalable applications vis-a-vis performance based functionalities. Monotonectally procrastinate. Compellingly scale future-proof content rather than enterprise users. Uniquely build scalable applications vis-a-vis performance based functionalities. Monotonectally procrastinate.</p>
</div>
</div>
<div class="item__boxes">
<div class="col-m-12 col-t-6 col-padding">
<div>Some Title</div>
<div>Enthusiastically incubate diverse initiatives without multifunctional strategic theme areas.</div>
</div>
<div class="col-m-12 col-t-6 col-padding">
<div>Globally Title</div>
<div>Globally impact integrated infomediaries via seamless mindshare. </div>
</div>
<div class="col-m-12 col-t-6 col-padding">
<div>Distinctively Title</div>
<div>Distinctively strategize long-term high-impact ideas whereas client-centered leadership skills.</div>
</div>
</div>
</div>