How to algin text inside div element using flexbox? - html

Question

I want to add text at bottom right corner inside card element. The text which I want to enter is Innings and Average. I have created flex-box but text such as innings and average is not getting displayed in bottom right corner.
Code:
.playercard1 {
display: flex;
align-items: flex-start;
height: 120px;
width: 500px;
margin-top: 30px;
margin-left: 30px;
}
.item {
padding-left: 10px;
}
.info {
margin-top: 25px;
}
<div class="playercard1">
<img class="profilepic" src="./profile.jpg">
<div class="item">
<div class="info">
<h6>Naman Kohli, Team Name, Right-Hand bat</h6>
<h2 className="cardtitle1">150</h2>
<p>Innings:5</p>
<p>Average:40.67</p>
</div>
</div>
</div>
In my screenshot you can see the innings and average is not getting displayed at bottom right corner. Check screenshot below:
What I am trying to achieve see in below screenshot I want to display innings and average at bottom right corner like the one in below screenshot.

Answer 1

Here is my solution, its not perfect, but it will give you a starting point
.playercard1 {
display: flex;
align-items: flex-start;
height: auto;
width: 500px;
margin-top: 30px;
margin-left: 30px;
border: 1px solid black;
padding: 10px;
}
.item {
padding-left: 10px;
flex:1;
}
.info {
margin-top: 25px;
}
.flex{
display:flex;
justify-content:space-between;
}
.cardtitle1{
font-size:24px;
}
<div class="playercard1">
<img class="profilepic" src="https://placehold.it/100x100">
<div class="item">
<div class="info">
<div>Naman Kohli, Team Name, Right-Hand bat</div>
<div class="flex">
<div class="cardtitle1">150</div>
<div>
<div>Innings:5</div>
<div>Average:40.67</div>
</div>
</div>
</div>
</div>
</div>
With position:absolute
.playercard1 {
display: flex;
align-items: flex-start;
height: auto;
width: 500px;
margin-top: 30px;
margin-left: 30px;
border: 1px solid black;
padding: 10px;
position: relative;
}
.item {
padding-left: 10px;
flex: 1;
}
.info {
margin-top: 25px;
}
.flex {
display: flex;
justify-content: space-between;
}
.cardtitle1 {
font-size: 30px;
margin-top:25px;
}
.absolute {
position: absolute;
bottom: 10px;
right: 15px;
}
<div class="playercard1">
<img class="profilepic" src="https://placehold.it/80x80">
<div class="absolute">
<div>Innings:5</div>
<div>Average:40.67</div>
</div>
<div class="item">
<div>Naman Kohli, Team Name, Right-Hand bat</div>
<div class="cardtitle1">150</div>
</div>
</div>

Answer 2

.playerCard{
display: flex;
align-items: flex-start;
height: 120px;
width: 500px;
margin-top: 30px;
margin-left: 30px;
box-shadow: 0 1px 2px rgba(0,0,0,0.4);
padding: 15px;
}
.playerCard .player_profile_pic{
display: inline-block;
vertical-align: top;
border-radius:50px;
}
.playerCard .player_profile_pic img{
border-radius: 100%;
width: 100px;
height: 100px;
}
.playerCard .player_details_div{
display: inline-block;
vertical-align: top;
margin-top: 10px;
margin-left: 15px;
width: calc(100% - 30px);
}
.player_details_div .player_name_det{
font-size: 16px;
}
.player_details_div .rank_ings_main_div{
width: 100%;
}
.rank_ings_main_div .number_div{
font-size: 30px;
text-align: left ;
float: left;;
}
.rank_ings_main_div .avg_ings_div{
float: right;
text-align: right;
}
.avg_ings_div p{
margin: 5px 0;
}
<div class="playerCard">
<div class="player_profile_pic">
<img src="https://i.stack.imgur.com/l60Hf.png" alt="">
</div>
<div class="player_details_div">
<div class="player_name_det">
Naman Kohli , Team Name, Right Hand Bat
</div>
<div class="rank_ings_main_div">
<div class="number_div">150</div>
<div class="avg_ings_div">
<p>Innings : 3</p>
<p>Average : 50.00</p>
</div>
</div>
</div>
</div>
I guess you need something like this.
Hope this helps.