JSFiddle - React, Tailwind, and code Playground

by duopixel

HTML

<div id="moveBad" class="button" onclick="leftBad();"></div>
    <div id="moveGood" class="button" onclick="leftGood()";></div>
    <div id="panelContainer">
        <div id="panels">
            <table>
                <tr>
                    <td>
                        <div id="page1" class="panel">
                        </div>
                    </td>
                    <td>
                        <div id="page2" class="panel">
                            <select>
                                <option value="volvo">
                                    Volvo
                                </option>
                                <option value="saab">
                                    Saab
                                </option>
                                <option value="mercedes">
                                    Mercedes
                                </option>
                                <option value="audi">
                                    Audi
                                </option>
                            </select>
                        </div>
                    </td>
                </tr>
            </table>
        </div>
    </div>

CSS

.button {
position: relative;
width: 44px;
height: 44px;
}
#moveGood {
background-color: lime;
}
#moveBad {
background-color: red;
}
div#panels {
position: relative;
height: 100%
}
div.panel {
position: relative;
top: 0px;
left: 0px;
width: 200px;
height: 50px;
border: 2px solid black;
}
.leftBad {
-webkit-transform: translate3d(-200px, 0, 0);
}
.leftGood {
left: -200px;
}
div#panelContainer {
position: absolute;
top: 100px;
left: 0;
overflow: hidden;
width: 210px;
}

JavaScript

function leftBad() {
    document.getElementById("panels").className += ' leftBad';
}
function leftGood() {
    document.getElementById("panels").className += ' leftGood';
}