JSFiddle - React, Tailwind, and code Playground

by Christian Sonne

HTML

<div class="container">
    <div class="case">
        <h3>Case 1</h3>
    </div>
    <div class="case">
        <h3>Case 2</h3>
    </div>
    <div class="case">
        <h3>Case 3</h3>
    </div>
    <div class="case">
        <h3>Case 4</h3>
    </div>
    <div class="case">
        <h3>Case 5</h3>
    </div>
    <div class="case">
        <h3>Case 6</h3>
    </div>
</div>

CSS

.container {
    max-width: 1440px;
    display: table;
    outline: 1px red dotted;
    width: 100%;
    border-spacing: 5px;
    margin: 0 auto;
}

.container .case:not(.selected) {
    width: 1%;
}

.container .case.selected {
    width: 100%;
}

.case {
    overflow: hidden;
    display: table-cell;
    height: 200px;
    outline: 1px black solid;
    transition-property: width;
    transition-duration: 0.5s;
    cursor: pointer;
}

.case h3 {
    margin: 0;
    transform-origin: 0.5em 50%;
    transform: rotate(90deg);
    white-space: nowrap;
}

JavaScript

var list = document.querySelectorAll(".case");
for (var i=0; i<list.length; i++) {
	list[i].addEventListener("click", function() {
		var previous = document.querySelector(".case.selected");
        if (previous) previous.classList.remove("selected");
        if (previous != this)
        	this.classList.add("selected");
	}, false);
}