JSFiddle - React, Tailwind, and code Playground

HTML

<input type="checkbox" id="overflowtrigger" />
<label for="overflowtrigger">Hide overflow</label><br />

<input type="checkbox" id="slidetrigger" />
<label for="slidetrigger">Slide!</label>

<div class="wrapper">
    <div class="boxcontainer">
        <div class="box">
            First bunch of content.
        </div>
        
        <div class="box">
            Second load  of content.
        </div>
    </div>
</div>

CSS

.wrapper {
    width: 200px;
    background-color: #EEEEEE;
    border: 2px solid #DDDDDD;
    padding: 1rem;
}

.boxcontainer {
    position: relative;
    left: 0;
    min-width: 100%;
    border: 2px solid #BDC3C7;
    white-space: nowrap;
    transition: all 0.4s ease;
}

.boxcontainer .box {
    display: inline-block;
    width: 100%;
    padding: 1rem;
    white-space: normal;
}

.boxcontainer .box:first-child {
    background-color: #F47983;
}

.boxcontainer .box:nth-child(2) {
    background-color: #FABCC1;
}

#slidetrigger:checked ~ .wrapper .boxcontainer {
    left: -100%;
}

#overflowtrigger:checked ~ .wrapper {
    overflow: hidden;
}


* {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}