将文本对齐到div中填充的右下角

大家好，我是新来的，刚开始学习HTML和CSS。

我正在尝试对齐“ 3％”文本，以使其在填充区域内向上推至右下角。

https://i.stack.imgur.com/6zHPW.png

我在这里找到了如何在div中完成结果的结果，该结果涉及以下方面：

.parent div{
    position: relative;
}

.child div{
    position: absolute;
    bottom: 0;
    right:0;
} 

它运作良好，但不幸的是，它使文本与整个div的右下角对齐，我只希望它与填充区域相对应。

我已经提供了该问题的图片以及该部分的HTML和CSS。如果这有任何区别，我还将使用Bootstrap及其卡实用程序。

任何帮助是极大的赞赏 ：）

的HTML

   <div class="col-12 col-sm-4 col-lg-3 d-flex justify-content-center">
        <div class="card border-0" style="width: 14rem; height: 7rem;">
         <div class="card-body">
            <div class="bump">
              <span class="overview_pageviews">Page Views</span>
              <img src="images/icon-facebook.svg" class="icon" alt="" style="float: right"><br>
            </div>
            <h4>87</h4>
            <span class="green_font" style="float: right;"><img src="images/icon-up.svg" alt="">3%</span>
          </div>
          </div>
       </div>

的CSS

.block{
    width: 14rem;
    height: 7rem;
    background-color: rgba(240, 243, 250,.6);
    border-radius: 5px;
    padding: 20px

}

.bump{
    margin-bottom: 1.5rem;
}

.overview_pageviews{
    font-size: .8rem;
    font-weight: 600;
}

.overview h4{
    display: inline-block;
}