How to align content of a div to the bottom with css?

Issue

How to align content of a div to the bottom with css

Could anyone help complete this? Or at least point to the right direction?

I want it that way

This is my code:

.bbb{
text-align:center;
bottom: 20px;
}
.text-wi{
border-top:2px dashed #13aff2;
	padding: 5px 0 0 20px;
}

.haha{
	padding:5px
}
.widget-host {
  display: grid;
  grid-template-columns:auto auto;
  grid-gap: 20px;
}

.widget-host > div.host-woovn {
border: 1px solid #e9e9e9;
	padding: 0 5px 0 5px;
}
.button{
    background-color: #669900;
    text-align: center;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 15px;
    display: inline-block;
    margin-bottom: 10px;
    height: initial;
    border-radius: 4px;
}

<div class="widget-host"><div class="host-woovn">
AAAAAAAAAAAAAAAAA<div class="text-wi">
	– A<br>
– B<br>
– C<br>
– D<br>
– C
</div>
	<div class="bbb">	<a href="/" target="_blank" class="button">AAAAA</a></div>
</div>
<div class="host-woovn">
	BBBBBBBBBBBBBBB<div class="text-wi">
– A<br>
– B<br>
– C<br>
– D<br>
– E<br>
– B<br>
– C<br>
– F</div>
<div class="bbb"><a href="/" target="_blank" class="button">BBBB</a></div>
	</div></div>

It does not work as I would like. What I am doing wrong?

Any help is appreciated

Solution

I did it using position property. Hope this helps you.. thanks

.bbb{
    text-align: center;
    /* bottom: 20px; */
    position: absolute;
    bottom: 0;
    left: 0;
    right: 0;
}
.text-wi{
border-top:2px dashed #13aff2;
	padding: 5px 0 0 20px;
}

.haha{
	padding:5px
}
.widget-host {
  display: grid;
  grid-template-columns:auto auto;
  grid-gap: 20px;
}

.widget-host > div.host-woovn {
border: 1px solid #e9e9e9;
	padding: 0 5px 0 5px;
  position: relative;
}
.button{
    background-color: #669900;
    text-align: center;
    color: #fff;
    cursor: pointer;
    font-weight: bold;
    font-size: 14px;
    padding: 8px 15px;
    display: inline-block;
    margin-bottom: 10px;
    height: initial;
    border-radius: 4px;
}

<div class="widget-host"><div class="host-woovn">
AAAAAAAAAAAAAAAAA<div class="text-wi">
	– A<br>
– B<br>
– C<br>
– D<br>
– C
</div>
	<div class="bbb">	<a href="/" target="_blank" class="button">AAAAA</a></div>
</div>
<div class="host-woovn">
	BBBBBBBBBBBBBBB<div class="text-wi">
– A<br>
– B<br>
– C<br>
– D<br>
– E<br>
– B<br>
– C<br>
– F</div>
<div class="bbb"><a href="/" target="_blank" class="button">BBBB</a></div>
	</div></div>

Answered By - Xenio Gracias