JSFiddle - React, Tailwind, and code Playground

HTML

<div id="container"><!-- flex container -->

    <div class="box" id="bluebox"><!-- flex item -->
        <p>DIV #1</p>
    </div>

    <div class="box" id="redbox"><!-- flex item -->
        <p>DIV #2</p>
    </div>

</div>

CSS

#container {
    display: flex; /* establish flex container */
        flex-direction: row; /* make main axis horizontal (default value) */
        justify-content: space-between; /* adjusted*/
        align-items: center; /* center items vertically, in this case */
    height: 300px; /* for demo purposes */
    border: 1px solid black; /* for demo purposes */
    background-color: #eee; /* for demo purposes */
}

.box {
    width: 50px;
    margin: 5px;
    text-align: center;
}

#bluebox { background: aqua; }
#redbox { background: red; }