flex-center.html

<div class="hero">
        <div class="container">
            <div class="blogItem blogItem__fl">
                <div class="blogItem__cat">
                    <div class="b-center">Lorem ipsum dolor sit amet.</div>
                </div>
                <div class="blogItem__dt">10/12/2012</div>
            </div>
            <div class="blogItem blogItem__fl">
                <div class="blogItem__cat">
                    <div class="b-center">Lorem ipsum dolor sit amet consectetur adipisicing.</div>
                </div>
                <div class="blogItem__dt">14/05/2011</div>
            </div>
            <div class="blogItem blogItem__fl">
                <div class="blogItem__cat">
                    <div class="b-center">Lorem ipsum dolor sit amet, consectetur adipisicing elit. Quia, vitae?</div>
                </div>
                <div class="blogItem__dt">03/07/2020</div>
            </div>
        </div>
    </div>
    <style>
    .hero {
    padding: 50px 0 0;
}
.container {
    margin: 0 auto;
    max-width: 1170px;
}
.blogItem {
    border: 1px solid rgba(0,0,0,.2);
    border-radius: 5px;
    margin-bottom: 20px;
    padding: 10px;
}
.blogItem__fl {
    display: flex;
    flex-wrap: wrap;
}
.blogItem__cat {
    flex-grow: .5;
    margin-left: auto;
    margin-bottom: 10px;
}
.blogItem__dt {
    flex-grow: .5;
    text-align: right;
}
.b-center {
    display: inline-block;
    text-align: center;
}
    </style>

align two flex items with different length