JSFiddle - React, Tailwind, and code Playground

by Svetlana Pavlova

HTML

<div class="wrapper">
  <aside class="sidebar">
    aside
  </aside>
  <main>
    content
  </main>
</div>

CSS

html, body {
  height: 100%;
}

.wrapper,.sidebar {
  margin: 0;
  padding: 0;
}

.wrapper {
  position: relative;
  height: 100%;
  border: 1px grey solid;
}

.sidebar {
  position: absolute;
  top: 0;
  right: 0;
  transform: translateY(-100%) rotate(270deg);
  transform-origin: right bottom;
  border: 2px pink solid;
}