JSFiddle - React, Tailwind, and code Playground

HTML

<div style="background: grey;">
    <div class="parent-container">
        <div class="aelia-text child33">
            The first of it's kind, to
            <br/> create a better customer
            <br/> journey with reduced
            <br/> collection waiting time and
            <br/> a special moment that makes
            <br/> even the most jet-lagged
            <br/> shopper smile.
        </div>
        <div class="child33">
            <div class="img-wrapper"></div>
        </div>
        <div class="child33">
            <div class="img-wrapper"></div>
        </div>
    </div>
</div>

CSS

body { margin: 0; }

.parent-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    flex-wrap: wrap;
    height: 92vh;
    width: 100vw;
    align-content: center;                   /* NEW */
}

.aelia-text {
    display: flex;
    justify-content: center;
    align-items: center;
    background: white;
    color: black;
    font-size: 1.5vw;
    font-family: portland-medium-font;
}

.child33 {
    flex-grow: 1;
    height: 50%;
    width: 33.3%;
    max-width: calc(100% * (1/3));
    margin: 0;
    position: relative;
}

.img-wrapper {
    position: absolute;
    top: 0;
    right: 0;
    bottom: 0;
    left: 0;
    background-image: url(http://i.imgur.com/60PVLis.png); /* added image for demo */
    background-size: contain;
    background-repeat: no-repeat;
    background-position: center;
}