JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-container">
    <div class="flex-item item1">A</div>
    <div class="flex-item item2">B</div>
    <div class="flex-item item3">C</div>
    <div class="flex-item item4">D</div>
    <div class="flex-item item5">E</div>
</div>

<div id="dashed-line"></div>

CSS

.flex-container {
    color: white;
    display: flex;
    height: 300px;
    background-color: yellow;
    justify-content: space-between;
    align-items: baseline;
}

.flex-item {
    background-color: green;
    width: 110px;
    min-height: 100px;
    margin: 10px;
    box-sizing: border-box;
    padding: 5px;
    text-align: center;
}

.item1 {  font-size: 2em; }
.item2 {  font-size: 7em; }
.item3 {  font-size: .5em; }
.item4 {  font-size: 3em; }
.item5 {  font-size: 10em; }


/*
.item1 {  align-self: flex-start; }
.item2 {  align-self: flex-end; }
.item3 {  align-self: center; }
.item4 {  align-self: baseline; }
.item5 {  align-self: stretch; }
*/

#dashed-line {
    border: 1px dashed red;
    position: absolute;
    width: 100%;
    top: 170px;
}