JSFiddle - React, Tailwind, and code Playground

by robknight

HTML

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

CSS

div
    {
    	display:inline-block;
    	width: 20px;
    	position:relative;
    	height:100px;
        border-style:solid;
        text-align:center;
    }
    span
    {
        background-color:pink;
        display:block;
        width:100%;
    }
    .north
    {
    	position:absolute;
    	top:0;
    }
    .south
    {
    	position:absolute;
    	bottom:0;
    }