Align div inside a flex to the right [duplicate] - html

Question

This question already has answers here:
How to Right-align flex item?
(13 answers)
In CSS Flexbox, why are there no "justify-items" and "justify-self" properties?
(6 answers)
Closed 2 years ago.
How do I align the album cover div to the right inside the card. I tried with align-self: end property but that does not seem to work. Could anyone please help?
.card {
border: 1px red solid;
width: 450px;
height: 150px;
border-radius: 5px;
display: flex;
flex-direction: row;
}
.image {
width: 150px;
height: 150px;
align-self: end;
border: 1px solid green;
}
<div class="card">
<div>
<div>Music controls</div>
</div>
<div class="image">Album Cover</div>
</div>

Answer 1

You can add justify-content: space-between; to your card's css:
.card {
border: 1px red solid;
width: 450px;
height: 150px;
border-radius: 5px;
display: flex;
flex-direction: row;
justify-content: space-between;
}
.image {
width: 150px;
height: 150px;
align-self: end;
border: 1px solid green;
float: right;
}
<div class="card">
<div>
<div>Music controls</div>
</div>
<div class="image">Album Cover</div>
</div>

Answer 2

Flex has two main axis, if you want to align the album cover to the right in the main axis, you need to use the property justify-content: space-between; that will expand your music controls and album cover, with space-between ittems are evenly distributed in the line; first item is on the start line, last item on the end line, you can check more about flex here

Answer 3

I added a new class to the music controls and added a flex-grow value of 2 and align-self value of flex-start.
then for .image, i added align-self value of flex-end
at the end, i removed the hard-coded width/ height from image
Good luck!
.card {
display: flex;
flex-direction: row;
background-color: #005792;
width: 450px;
height: 150px;
border-radius: 5px;
overflow: hidden;
}
.music-controls{
display: flex;
flex-grow: 2;
}
.image {
display: flex;
flex-grow: 1;
background-color: #fd5f00;
}
<div class="card">
<div class="music-controls">
<div>Music controls</div>
</div>
<div class="image">Album Cover</div>
</div>