JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-container">
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div>
    <div class="flex-item"></div><!-- invisible flex item for balance -->
</div>

CSS

.flex-container {
    max-width: 80%;
    margin: 100px auto;
    height: 600px;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background-color: #1E5655
}

.flex-item {
    width: 300px;
    height: 50px;
    background-color: #fff;
}

.flex-item:nth-of-type(1) {
    /* align-self: flex-start; <-- REMOVE */
    margin-bottom: auto;
    margin-right: auto;
    background-color: aqua;
}

.flex-item:nth-of-type(2) {
    background-color: #eee;
}

.flex-item:nth-of-type(3) {
    background-color: #FFD454;
}

.flex-item:nth-of-type(4) {
    margin-top: auto;
    visibility: hidden;
    background-color: red;
}