How to algin text inside div element using flexbox?

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.sstatic.net/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.