Is there a way to position the a element at the top and the button at the bottom, using only flex properties without absolute or fixed positioning? Currently, the button is at the bottom but the title is not at the top:
.all {
display: flex;
height: 300px;
}
.element1 {
width: 50%;
background: blue;
}
.element2 {
background: red;
width: 50%;
}
#details {
height: 100%;
display: flex;
flex-wrap: wrap;
justify-content: center;
align-items: self-end;
}
#details a {
width: 100%;
}
#details button {
width: 100%;
height: 50px;
}<div class="all">
<div class="element1"></div>
<div class="element2">
<div id="details">
<a>title</a>
<button>Add TO Cart</button>
</div>
</div>
</div>