JSFiddle - React, Tailwind, and code Playground

HTML

<section id="rowsec">
        <div class="colwrap">
                <a class="layer">41%</a>
                <a class="stat">Company average cost saving  versus originator brands on the South African market</a>
                <a class="layer">10+</a>
                <a class="stat">Company has 10 market leading brands within the family of products</a>
        </div>
    </section>

CSS

#rowsec {
    height: 246px;
    width: 100%;
    background-color: #0c225f;
    display: flex;
    align-items: center;
}
/* Clears floats after the columns */
#rowsec:after {
content: "";
display: table;
clear: both;
}
.colwrap {
    width: 80%;
    margin: auto;
    display: flex;
    align-items: center;
}

.layer {
font-family: 'HKGroteskMedium';
font-size: 75px;
font-weight: 500;
line-height: 1.2;
color: #9fb8ff;
}

.stat {
padding-left: 35px;
font-weight: 500;
font-style: normal;
font-stretch: normal;
line-height: 1.45;
color: #ffffff;
max-width: 412px;
}

.colwrap a{
float: left;
}