JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<div class="left">
    <span class="side"><span class="rotate"></span></span>
    <span class="side"><span class="rotate">AAA</span></span>
    <span class="side"><span class="rotate">AAA</span></span>
    <span class="side"><span class="rotate"></span></span>
</div>
    
<div class="right">
    <span class="side"><span class="rotate"></span></span>
    <span class="side"><span class="rotate">AAAAAAAA</span></span>
    <span class="side"><span class="rotate">AAA</span></span>
    <span class="side"><span class="rotate"></span></span>
</div>






<!-- 
<div class="left">
      <span class="side"><p class="rotate">AAA</p></span>
      <span class="side"><p class="rotate">AAA</p></span>
      <span class="side"><p class="rotate">AAAAAAA</p></span>
      <span class="side"><p class="rotate">AAA</p></span>
      <span class="side"><p class="rotate">AAA</p></span>
</div>

<div class="right">
      <span class="side"><p class="rotate">AAA</p></span>
      <span class="side"><p class="rotate">AAA</p></span>
      <span class="side"><p class="rotate">AAA</p></span>
      <span class="side"><p class="rotate">AAA</p></span>
      <span class="side"><p class="rotate">AAA</p></span>
</div>
 -->

<!-- 
<div class="left">
      <span class="side"><span class="rotate">AAA</span></span>
      <span class="side"><span class="rotate">AAA</span></span>
      <span class="side"><span class="rotate">AAA</span></span>
      <span class="side"><span class="rotate">AAA</span></span>
      <span class="side"><span class="rotate">AAA</span></span>
</div>

<div class="right">
      <span class="side"><span class="rotate">AAA</span></span>
      <span class="side"><span class="rotate">AAA</span></span>
      <span class="side"><span class="rotate">AAA</span></span>
      <span class="side"><span class="rotate">AAA</span></span>
      <span class="side"><span class="rotate">AAA</span></span>
</div>

 -->

CSS

div.left {
    left: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    display: inline-block;
    float: left;
    top: 0;
    bottom: 0;
    }
    
div.left span.side {
    height: 25%;
    position: relative;
    display: table;
    }
    
div.left span.side span.rotate {
    text-align: center;
    vertical-align: middle;
    line-height: 0;
    display: inline-table;
    -webkit-transform: rotate(90deg);
    -moz-transform: rotate(90deg);
    -o-transform: rotate(90deg);
    }


div.right {
    right: 0;
    margin: 0;
    padding: 0;
    position: fixed;
    display: inline-block;
    float: left;
    top: 0;
    bottom: 0;
    }
    
div.right span.side {
    height: 25%;
    position: relative;
    display: table;
    }
    
div.right span.side span.rotate {
    text-align: center;
    vertical-align: middle;
    line-height: 0;
    display: table-cell;
    -webkit-transform: rotate(-90deg);
    -moz-transform: rotate(-90deg);
    -o-transform: rotate(-90deg);
    }