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;
    
    min-width: 100%;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;

-webkit-box-orient: horizontal;
-webkit-box-direction: normal;
-webkit-flex-direction: row;
-ms-flex-direction: row;
flex-direction: row;

-webkit-flex-wrap: nowrap;
-ms-flex-wrap: nowrap;
flex-wrap: nowrap;

-webkit-box-pack: start;
-webkit-justify-content: flex-start;
-ms-flex-pack: start;
justify-content: flex-start;

-webkit-align-content: flex-start;
-ms-flex-line-pack: start;
align-content: flex-start;

-webkit-box-align: start;
-webkit-align-items: flex-start;
-ms-flex-align: start;
align-items: flex-start;
}

.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;
}