JSFiddle - React, Tailwind, and code Playground

HTML

<div class="floatRotatedText" style="height: 100%">
	<div class="button" style="height: 20%">
		<p class="rotated" width="auto">Dekton 1</p>
	</div>
	<div class="button" style="height: 20%">
	Dekton 2A
	</div>
	<div style="height: 20%">
	Dekton 2B
	</div>
	<div style="height: 20%">
	Dekton 3
	</div>
	<div style="height: 20%">
	Dekton 4
	</div>
</div>

CSS

.floatRotatedText {
    width: 50px;
    height: 600px;
    background-color: red;
    margin-left: 0px;
    top:0px;
    position: absolute;
    display: inline-block;
    float:left;
}

.button {
    width: 50px;
    height: 150px;
    background-color: pink;
    position: relative;
    display: table;
}

.rotated {
        text-align: center;
        -webkit-transform: rotate(-90deg);
        -moz-transform: rotate(-90deg);
        -o-transform: rotate(-90deg);
        background-color: white;
        margin:auto;
        vertical-align: middle;
        width: 100px;
        height: 50px;
        display: table-cell;
}