JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
    <div>centered</div>
    <div>centered</div>
</div>

CSS

.container {
    display:flex;
    width:100%;
    align-items: center;
    justify-content: center;
    height: 400px;
border: 4px solid black;
}
.container div {
    display:flex;
    align-items: center;
    justify-content: center;
}

.container > div {
    width: 40%;
    background-color: red;
    height: 221.5433px;
}

.container > div + div {
    width: 40%;
    background-color: brown;
    height: 278.8431px;
}