Looking for help with a layout challenge. I have a container with 2 columns: an image on the left and two <p> elements on the right. My goal is to position one <p> at the top and the other at the bottom of the container.
I attempted to use flexbox and tried using align-items: stretch, but it didn't quite achieve the desired effect. However, using flex-start and flex-end did work as expected.
Is it possible to achieve this layout using flexbox?
.container {
display: flex;
align-items: stretch;
}
img {
display: block;
width: 100%;
}
.element-box {
height: 100%;
}<div class="container">
<div>
<img src="https://placeimg.com/640/480/nature">
</div>
<div class="element-box">
<p>Should be on Top</p>
<p>Should be on Bottom</p>
</div>
</div>