Flexbox Based Vertical Accordion With Pure CSS

Preview:

Description:

A smooth, responsive, vertical accordion UI that expands the current accordion panel on mouse hover, built using pure CSS and flexbox model.

How to use it:

Create the accordion panels as follow:

<article>
  <h2>Section 1</h2>
  <div>
    <h3>Section 1</h3>
  </div>
</article>
<article>
  <h2>Section 2</h2>
  <div>
    <h3>Section 2</h3>
  </div>
</article>
<article>
  <h2>Section 3</h2>
  <div>
    <h3>Section 3</h3>
  </div>
</article>
...

The main layout CSS:

html, body, div + div {
  width: 100vw;
  height: 100vh;
}
div + div {
  list-style: none;
  position: relative;
  display: flex;
  flex-direction: row;
  flex-wrap: nowrap;
  align-items: stretch;
  overflow: hidden;
}
article div {
  text-align: left;
  width: 58vw;
}

The CSS for the hover interaction.

div + div:hover article {
  flex: initial;
  width: 10%;
}
div + div article:hover { width: 60%; }
article > div {
  opacity: 0;
  transition: opacity .2s ease 0;
}
div + div article:hover > div {
  opacity: 1;
  transition: opacity .3s ease .3s;
}

Make the accordion fully responsive:

@media (max-width: 900px) {
div + div article { padding: 2vh 3vw; }
div + div article > h2 {
  transform: rotate(90deg);
  bottom: 23vh;
  min-width: 12em;
  text-align: left;
  transform: rotate(-90deg);
  transform-origin: 0 0 0;
  opacity: 1;
}
div + div article:hover > h2 { opacity: 0; }
article div {
  max-height: calc(72%);
  overflow-y: auto;
}
}