I want to put my div in bottom of another div - html

Question

I have a issue about a position of div.
I want to put my div "list-button" in the bottom of the main div "list".
And i want that the position will not change with the size of the text above. Actually the position depend of the text, so it is not what i want
Example from application
.list {
border: 1px solid grey;
display: flex;
margin: 30px;
height: 230px;
border-radius: 10px;
box-shadow: 1px 1px 12px #555;
}
.list-img {
width: 20%;
}
img {
width: 100%;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.list-content {
width: 100%;
margin-left: 20px;
margin-right: 20px;
}
.list-title {
border-bottom: 1px solid grey;
display: flex;
justify-content: space-between;
padding-top: 10px;
}
.list-button {
border: 3px solid blue;
display: flex;
justify-content: center;
}
<div class="list">
<div class="list-img" *ngIf="moviePoster; else notFound">
<img src="https://image.tmdb.org/t/p/w200/{{moviePoster}}" alt="...">
</div>
<ng-template #notFound>
<div class="list-img">
<img src="../../assets/not_found.jpg" alt="...">
</div>
</ng-template>
<div class="list-content">
<div class="list-title">
<h4>{{movieTitle}}</h4>
<h5>{{movieVote}}</h5>
</div>
<div class="list-date">
<p>
{{movieDate | date: 'dd MMMM, y' }}
</p>
</div>
<div *ngIf="movieText; else loremBlock">
<p>{{movieText | slice:0:300 }}...</p>
</div>
<div>
<ng-template #loremBlock>
<p>Oups, overview not found !</p>
</ng-template>
</div>
<div class="list-button">
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>
Thanks you for help me.

Answer 1

You may use position: absolute; to .list-button and position: relative; to .list to position the text to the bottom of .list container.
.list {
...
position: relative;
}
.list-button {
position: absolute;
bottom: 0;
left: 20%;
width: calc(100% - 20% - 20px);
...
}
.list {
border: 1px solid grey;
display: flex;
margin: 30px;
height: 230px;
border-radius: 10px;
box-shadow: 1px 1px 12px #555;
position: relative;
}
.list-img {
width: 20%;
}
img {
width: 100%;
height: 100%;
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.list-content {
width: 100%;
margin-left: 20px;
margin-right: 20px;
}
.list-title {
border-bottom: 1px solid grey;
display: flex;
justify-content: space-between;
padding-top: 10px;
}
.list-button {
position: absolute;
bottom: 0;
left: 20%;
width: calc(100% - 20% - 20px);
border: 3px solid blue;
display: flex;
justify-content: center;
}
<div class="list">
<div class="list-img" *ngIf="moviePoster; else notFound">
<img src="https://picsum.photos/id/500/200/230" alt="...">
</div>
<ng-template #notFound>
<div class="list-img">
<img src="../../assets/not_found.jpg" alt="...">
</div>
</ng-template>
<div class="list-content">
<div class="list-title">
<h4>{{movieTitle}}</h4>
<h5>{{movieVote}}</h5>
</div>
<div class="list-date">
<p>
{{movieDate | date: 'dd MMMM, y' }}
</p>
</div>
<div *ngIf="movieText; else loremBlock">
<p>{{movieText | slice:0:300 }}...</p>
</div>
<div>
<ng-template #loremBlock>
<p>Oups, overview not found !</p>
</ng-template>
</div>
<div class="list-button">
<button type="button" class="btn btn-primary">Add</button>
</div>
</div>

Answer 2

You could achieve that by applying the property align-self: end;or justify-self: end; for the .list-button.
For that, it is required that the parent element has the display: flex; property.