.container {
    display: flex;

    /* Misc */
    border: 3px solid black;
    height: 32rem;
    width: 100%;
}
.resizer[data-direction='horizontal'] {
    background-color: black;
    cursor: ew-resize;
    height: 100%;
    width: 2px;
}
.resizer[data-direction='vertical'] {
    background-color: black;
    cursor: ns-resize;
    height: 2px;
    width: 100%;
}
.container__left {
    /* Initially, the left takes 3/4 width */
    width: 75%;

    /* Misc */
    align-items: center;
    display: flex;
    justify-content: center;

}
.container__right {
    /* Take the remaining width */
    flex: 1;

    /* Misc */
    align-items: center;
    display: flex;
    flex-direction: column;
    justify-content: center;

}
.container__top {
    /* Initial height */
    height: 40%;
    width: 100%;
    overflow: auto;

    /* Misc */
    align-items: center;
    display: flex;
    justify-content: center;

}
.container__bottom {
    /* Take the remaining height */
    flex: 1;

    /* Misc */
    align-items: center;
    display: flex;
    justify-content: center;

    width: 100%;
    overflow: auto;
}