JSFiddle - React, Tailwind, and code Playground

by tsayen

HTML

<div class="root">
    <div class="rotated-parent">
        <button class="rotated">Rotated Text</button>
    </div>
    <div class="not-rotated">Regular Text</div>
</div> <button name="a" onclick="$('.rotated-parent').css('display', 'none')">click me</button>

CSS

* {
    box-sizing: border-box;
}

.root {
    border: 1px solid red;
    width: 200px;
    padding: 2px;
}
.not-rotated {
    border: 1px solid blue;
}
.rotated-parent {
    /* border: 1px solid lightgrey; */
    margin-bottom: 2px;
}
.rotated {
    width: 10em;
    height: 1.5em;
    /* border: 1px solid green; */
    transform: rotate(-90deg) translateX(-100%);
    transform-origin: left top;
}

JavaScript

function resizeParent() {
    var rotated = $('.rotated');
    var parent = $('.rotated-parent');

    parent.css('height', rotated.css('width'));
    parent.css('width', rotated.css('height'));
}

resizeParent();

function showHide() {
    parent.css('display', 'none');
}

$(window).scroll(function () {
    console.log('scroll');
    resizeParent();
})

$(window).resize(function () {
    console.log('resize');
    resizeParent();
})