.panel {
    position: relative;
    width: 100%;
    height: 100%;
    float: left;
}

/* Split the screen in half. */
.split {
    position: relative;
    width: 100%;
    height: 100%;
    padding-top: 20px;
}

/* Control the left side. */
.left {
    position: fixed;
    left: 0;
    width: 30%;
    height: 100%;
    background-color: darkgray;
}

/* Control the right side. */
.right {
    position: fixed;
    right: 0;
    width: 70%;
    height: 100%;
    background-color: whitesmoke;
}

/* Menu size on mobile devices. */
@media only screen and (max-width: 52em) {
    .split {
        position: relative;
        display: block;
        width: 100%;
        height: 100%;
        padding-top: 20px;
    }
    .left {
        position: relative;
        float: left;
        width: 100%;
        height: 20em;
        background-color: darkgray;
    }
    
    /* Control the right side. */
    .right {
        position: relative;
        float: left;
        width: 100%;
        height: 50em;
        background-color: whitesmoke;
    }
}