Multiple issues while setting up 2 rows of cards

Two of the problems I'm facing are that the rating for each card isn't at the bottom of the card like Figma's design but directly below the subtitle, and the titles for the 3rd and 5th card aren't on a single line, even though they look like they have plenty of space to do so. For this project I have to use Flexbox only, no CSS grid.

<div class="hebergements-cards">
<article class="card-vertical">
                            <img  src="images/hebergements/nicate-lee.jpg" alt="Image de la chambre d'hôtel montrant deux lits">
                            <div class="card-content">
                                <div class="card-txt">
                                    <h3 class="card-title">Auberge Le Panier</h3>
                                        <p class="card-subtitle">Nuit à partir de 23<span class="euro">€</span></p>
                                </div>
                                <div class="card-rating">
                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
                                    <i class="fa-xs fa-solid fa-star" aria-hidden="true"></i>
                                    <i class="fa-xs fa-solid fa-star neutral-star" aria-hidden="true"></i>
                                    <span class="sr-only">Note de 4 sur 5</span>
                                </div>
                            </div>
                        </article>

</div>

.hebergements-cards {
    display: flex;
    flex-direction: row;
    gap: 30px;
}

.hebergements-cards .card-vertical {
    margin-top: 33px;
}

.hebergements-cards .card-content {
    width: 67%;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}

.hebergements-cards .card-title {
    margin-top: 10px;
    margin-bottom: 4px;
}

.hebergements-cards .card-subtitle {
    margin: 0;
}

.card-rating {
    margin-bottom: 5px;
}

.card-vertical {
    background-color: white;
    border-radius: 20px;
    padding: 5px;
    width: 33%;
    filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
}

.card-vertical img {
    display: flex;
    align-items: center;
    justify-content: center;
    background-color: white;
    border-radius: 20px 20px 0 0;
    filter: drop-shadow(0px 3px 15px rgba(0, 0, 0, 0.1));
    width: 100%;
    height: 124px;
    object-fit: cover;
}

Solution

change this part of CSS

.card-vertical .card-title {
        margin-top: 10px;
        margin-bottom: 4px;
        width: 100%
    
    }

.hebergements-cards .card-content {
    width: 100%;
    padding-left: 15px;
    display: flex;
    flex-direction: column;
    box-sizing: border-box;
}