JSFiddle - React, Tailwind, and code Playground

HTML

<div>
    <span class="north"><span>N</span></span>
    <span class="south"><span>S</span></span>
</div>

CSS

div
    {
    	display:inline-block;
    	width: 20px;
    	position:relative;
    	height:100px;
        border-style:solid;
        text-align:center;
    }
    .north, .south
    {
        left: 0;
        width: 100%;
        text-align:center;
    }

.north span, .south span
{
    background-color:pink;
}

    .north
    {
    	position:absolute;
    	top:0;
    }
    .south
    {
    	position:absolute;
    	bottom:0;
    }