Align the svg at the extreme bottom-right?

Question

I have made a four cards and have added a svg using FONT AWESOME.

I want to align the svg in the bottom right of the container/div/card.
I have moved it to the right in the below mentioned code, you can see in the code.

The code link is as follows: https://code.sololearn.com/Wm9F4ADYca4R/#html

Please mention the svg code or the the solved code link.
THANK YOU

Answer 1

There are many ways to do so, but you should use flexbox on card so that, you can grow the body part, thus it will push icon to bottom

Answer 2

can you please provide with the code Arvind Singh Rawat

Answer 3

CSS:

.card{
display: flex;
flex-flow: column;
}
.card .icon{
align-self: flex-end;
margin: 14px;
}
.card .description{
flex-grow: 1;
}

In HTML, add class 'card' to your <div id="#cardx">, add class "description" to paragraph and add class icon to <i>
Eg:
<div id="card2" class="card">
<h3>Supervisor</h3>
<p class="f description">Monitors activity to identify project roadblocks</p>
<i class="fas fa-user-tie fa-2x icon"></i>
</div>
<br>

You can also try playing with position absolute and right and bottom attributes.