JSFiddle - React, Tailwind, and code Playground

HTML

<div class="flex-container">
            <div class="flex-item">
                    <p class="flex-qty-container">7</p>
                    <p class="flex-qty-label">Label</p>
            </div>
            <div class="flex-item-2">
                    <p class="flex-item-left-corner">top left corner</p>
                    <div class="flex-item">
                      <p class="flex-item-center">Center of box</p>
                      <p class="flex-item-bottom-middle">Bottom middle</p>
                    </div>
                    <p class="flex-item-right-corner">top right corner</p>
                   
            </div>
        </div>

CSS

.flex-container {
    display: flex;
    background-color: lightgrey;
    flex-direction: row;
}

.flex-item {
    display: flex;
    background-color: cornflowerblue;
    margin: 10pt;
    flex-direction: column;
    justify-content: center;
    align-items: center;
}


.flex-item-2 {
    display: flex;
    background-color: cornflowerblue;
    margin: 10pt;
    flex-direction: row;
    justify-content: center;
    align-items: center;
}

.flex-qty-container {
    font-size: 27pt;
}

.flex-item-left-corner {
    background-color: red;
    align-self: flex-start;
}

.flex-item-right-corner {
    background-color: red;
    align-self: flex-start;;
    font-size: 10pt;
}

.flex-item-center {
    background-color: red;
     font-size: 12pt;
     align-self: center;
}

.flex-item-bottom-middle {
    background-color: red;
    align-self: flex-end;
}