Html 在不同卡中对齐引导陷阱文本

我试图将这些卡片中的文字水平对齐在同一行上，底部是数字，中间是长短语，顶部是“经济”，就像现在一样。 我尝试过不同的方法，但没有取得很大成功。我的代码如下。 使用其他类型的引导卡可能更好？ 谢谢

    <div class="container">
<div class="row"> 
    <div class="col-sm-2 col-xl-2 filter-item all economic" id="deflationm">
            <a href="#deflation" data-target="#deflation" data-toggle="modal">
                <div class="card h-75 text-center" style="line-height: 1;">
                    <div class="card-body" style="padding-bottom: 1rem;">
                        <p class="card-title"><small class="font-small text-nowrap mx-1" style="color: rgb(7, 170, 187);">ECONOMIC</small></p>
                        <small class="card-text" style="color: rgb(0, 0, 0); font-size: 1rem;">Deflation</small>
                        <div class="card-footer" style="padding-bottom: 5rem; background-color: rgba(255, 251, 251, 0.03); border: 0px;"><small style="color: rgb(7, 170, 187);">8.7%</small></div>
                    </div>
                    <span class="dot" style="background: rgb(7, 170, 187);"></span>
                </div>
            </a>
        </div>
        <div class="col-sm-2 col-xl-2 filter-item all economic" id="energy-price-shockm">
            <a href="#energy-price-shock" data-target="#energy-price-shock" data-toggle="modal">
                <div class="card h-75 text-center" style="line-height: 1;">
                    <div class="card-body" style="padding-bottom: 1rem;">
                        <p class="card-title"><small class="font-small text-nowrap mx-1" style="color: rgb(7, 170, 187);">ECONOMIC</small></p>
                        <small class="card-text" style="color: rgb(0, 0, 0); font-size: 1rem;">Energy price shock</small>
                        <div class="card-footer" style="padding-bottom: 5rem; background-color: rgba(255, 251, 251, 0.03); border: 0px;"><small style="color: rgb(7, 170, 187);">22.5%</small></div>
                    </div>
                    <span class="dot" style="background: rgb(7, 170, 187);"></span>
                </div>
            </a>
        </div>
        <div class="col-sm-2 col-xl-2 filter-item all economic" id="failure-of-critical-infrastructurem">
            <a href="#failure-of-critical-infrastructure" data-target="#failure-of-critical-infrastructure" data-toggle="modal">
                <div class="card h-75 text-center" style="line-height: 1;">
                    <div class="card-body" style="padding-bottom: 1rem;">
                        <p class="card-title"><small class="font-small text-nowrap mx-1" style="color: rgb(7, 170, 187);">ECONOMIC</small></p>
                        <small class="card-text" style="color: rgb(0, 0, 0); font-size: 1rem;">Failure of critical infrastructure</small>
                        <div class="card-footer" style="padding-bottom: 5rem; background-color: rgba(255, 251, 251, 0.03); border: 0px;"><small style="color: rgb(7, 170, 187);">14.9%</small></div>
                    </div>
                    <span class="dot" style="background: rgb(7, 170, 187);"></span>
                </div>
            </a>
        </div>
        <div class="col-sm-2 col-xl-2 filter-item all economic" id="failure-of-financial-mechanism-or-institutionm">
            <a href="#failure-of-financial-mechanism-or-institution" data-target="#failure-of-financial-mechanism-or-institution" data-toggle="modal">
                <div class="card h-75 text-center" style="line-height: 1;">
                    <div class="card-body" style="padding-bottom: 1rem;">
                        <p class="card-title"><small class="font-small text-nowrap mx-1" style="color: rgb(7, 170, 187);">ECONOMIC</small></p>
                        <small class="card-text" style="color: rgb(0, 0, 0); font-size: 1rem;">Failure of financial mechanism or institution</small>
                        <div class="card-footer" style="padding-bottom: 5rem; background-color: rgba(255, 251, 251, 0.03); border: 0px;"><small style="color: rgb(7, 170, 187);">14.5%</small></div>
                    </div>
                    <span class="dot" style="background: rgb(7, 170, 187);"></span>
                </div>
            </a>
        </div>
        <div class="col-sm-2 col-xl-2 filter-item all economic" id="fiscal-crisesm">
            <a href="#fiscal-crises" data-target="#fiscal-crises" data-toggle="modal">
                <div class="card h-75 text-center" style="line-height: 1;">
                    <div class="card-body" style="padding-bottom: 1rem;">
                        <p class="card-title"><small class="font-small text-nowrap mx-1" style="color: rgb(7, 170, 187);">ECONOMIC</small></p>
                        <small class="card-text" style="color: rgb(0, 0, 0); font-size: 1rem;">Fiscal crises</small>
                        <div class="card-footer" style="padding-bottom: 5rem; background-color: rgba(255, 251, 251, 0.03); border: 0px;"><small style="color: rgb(7, 170, 187);">26.5%</small></div>
                    </div>
                    <span class="dot" style="background: rgb(7, 170, 187);"></span>
                </div>
            </a>
        </div>
    </div>
</div>