* {

    margin: 0;

    padding: 0;

    box-sizing: border-box;

}

​

html,body {

    height: 100%;

    font-size: 1rem;

}

​

#container {

    display: flex;

    width: 100%;

}

​

#first {

    border: 1px solid black;

    border-radius: 5px;

    width: 35%;

    height: 90vh;

    margin-left: 10px;

}

​

.grid_container {

    border: 1px solid black;

    display: grid;

    grid-template-columns: 50px 50px 50px;

    grid-template-rows: 50px 50px;

    background-color: green;

    padding: 10px;

}

​

.small_btn {

    width: 100%;

    height: 50px;

}

​

.big_btn {

    width: 100%;

    height: 50px;

}

​

#second {

    border: 1px solid black;

    border-radius: 5px;

    height: 90vh;

    width: 50%;

    margin-left: 10px;

}

​

.grid-container {

    display: grid;

    grid-template-areas: "button1 button2 button3"

                         "button4 button5 button5";

    grid-gap: 5px;

}

​

.grid-item:nth-child(1) {

    grid-area: button1;

}

​

.grid-item:nth-child(2) {

    grid-area: button2;

}

​

.grid-item:nth-child(3) {

    grid-area: button3;

}

​

.grid-item:nth-child(4) {

    grid-area: button4;

}

​

.grid-item:nth-child(5) {

    grid-area: button5;

}