Pure CSS horizontal accordion slider

.css

.donslide {
    display: table;
    width: 100%;
}
.donslide .item {
    display: table-cell;
    width: 1%;
    transition: 0.6s ease-in-out all;
    overflow: hidden;
    position: relative;
    min-width: 65px;
}
.donslide .item + .item {
    border-left: 1px solid #000;
}
.donslide:hover .item:hover {
    width: 100%;
}
/* Vertical item titles */
.donslide .donslide-title {
    font-size: 3em;
    transform: rotate(90deg);
    position: absolute;
    right: 0;
    bottom: 0;
    margin-right: 1.6em;
    text-align: right;
    transform-origin: 100% 100%;
    white-space: nowrap;
    padding: 15px;
}

.html

<div class="donslide">
    <div class="item">
        <div class="donslide-title">Hello World</div>
    </div>
    <div class="item">
        <div class="donslide-title">Foo</div>
    </div>
    <div class="item">
        <div class="donslide-title">Bar</div>
    </div>
</div>

demo.md

View demo