JSFiddle - React, Tailwind, and code Playground

by Asif Sharif Shahid

HTML

<div class="flex-container">
    <div class="flex-item-2">
        <div class="flex-sub-container">
            <p class="flex-item-left-corner">top left corner</p>
            <p class="flex-item-right-corner">top right corner</p>
		</div><!-- END .flex-sub-container -->
		<p class="flex-item-center">Center of box</p>
    </div>
</div>

CSS

.flex-container {
    display: flex;
    background-color: lightgrey;
    flex-direction: row;
    align-items: stretch;
    align-content: stretch;
}

.flex-item {
    display: flex;
    background-color: cornflowerblue;
    margin: 10pt;
}

.flex-item-2 {
    display: flex;
	flex-direction: column;
    background-color: cornflowerblue;
    flex: 2 0 0;
}

.flex-sub-container {
    display: flex;
    justify-content: space-between;
}

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

.flex-item-right-corner {
    background-color: red;
}

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

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