JSFiddle - React, Tailwind, and code Playground

by Sahil Kashyap

HTML

<div class="flex-container">
  
    <div class="flex-item-2">
        <div class="flex-sub-container">
            <p class="flex-item-left-corner">अ</p>
            <p class="flex-item-right-corner">A</p>
		</div><!-- END .flex-sub-container -->
		<p class="flex-item-center">ا</p>
		<p class="flex-item-bottom-middle">alif</p>
      <div class="flex-sub-container">
            <p class="flex-item-left-corner">اب</p>
            <p class="flex-item-center">باب</p>
            <p class="flex-item-right-corner">با</p>
		</div>
    
    </div>
</div>

CSS

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


.flex-item-2 {
    display: flex;
	flex-direction: column;
    background-color: yellow;
    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: center;
    background-color: red;
}

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