main.css

#editor {
    height: 100%;
    width: 50%;
    display: inline-block;
}

#code {
    height: 100%;
    width: 49%;
    display: inline-block;
    vertical-align: top;
}

.container {
    height: calc(100vh - 80px);
    width: 100%;
}

button {
    padding: 6px 10px;
    margin-bottom: 5px;
    margin-right: 10px;
    background-color: rgb(37, 185, 230);
    color: white;
    font-size: 10px;
    font-weight: bold;
    border: 1px solid #eee;
    border-radius: 5px;
    box-shadow: 1px 1px 1px 1.5px rgb(147, 155, 160);
    outline: none;
}

button:active {
    box-shadow: none;
}

.link-to-github {
    cursor: pointer;
    display: inline-block;
    vertical-align: middle;
}

.auto-compile {
    float: right;
    margin-right: 4%;
    vertical-align: middle;
    padding-top: 5px;
}

 /* === ボタンを表示するエリア ============================== */
.switchArea {
  line-height    : 22px;                /* 1行の高さ          */
  letter-spacing : 0;                   /* 文字間             */
  text-align     : center;              /* 文字位置は中央     */
  font-size      : 8px;                /* 文字サイズ         */

  position       : relative;            /* 親要素が基点       */
  margin         : auto;             /*    中央寄せ           */
  /*margin-right: 20%;*/
  width          : 56px;               /* ボタンの横幅       */
  background     : #fff;                /* デフォルト背景色   */
}

 /* === チェックボックス ==================================== */
.switchArea input[type="checkbox"] {
  display        : none;            /* チェックボックス非表示 */
}

 /* === チェックボックスのラベル（標準） ==================== */
.switchArea label {
  display        : block;               /* ボックス要素に変更 */
  box-sizing     : border-box;          /* 枠線を含んだサイズ */
  height         : 22px;                /* ボタンの高さ       */
  border         : 2px solid #999999;   /* 未選択タブのの枠線 */
  border-radius  : 11px;                /* 角丸               */
}

 /* === チェックボックスのラベル（ONのとき） ================ */
.switchArea input[type="checkbox"]:checked +label {
  border-color   : #78bd78;             /* 選択タブの枠線     */
}

 /* === 表示する文字（標準） ================================ */
.switchArea label span:after{
  content        : "OFF";               /* 表示する文字       */
  padding        : 0 0 0 13px;          /* 表示する位置       */
  color          : #999999;             /* 文字色             */
}

 /* === 表示する文字（ONのとき） ============================ */
.switchArea  input[type="checkbox"]:checked + label span:after{
  content        : "ON";                /* 表示する文字       */
  padding        : 0 13px 0 0;          /* 表示する位置       */
  color          : #78bd78;             /* 文字色             */
}

 /* === 丸部分のSTYLE（標準） =============================== */
.switchArea #swImg {
  position       : absolute;            /* 親要素からの相対位置*/
  width          : 14px;                /* 丸の横幅           */
  height         : 14px;                /* 丸の高さ           */
  background     : #999999;             /* カーソルタブの背景 */
  top            : 4px;                 /* 親要素からの位置   */
  left           : 4px;                 /* 親要素からの位置   */
  border-radius  : 7px;                /* 角丸               */
  transition     : .2s;                 /* 滑らか変化         */
}

 /* === 丸部分のSTYLE（ONのとき） =========================== */
.switchArea input[type="checkbox"]:checked ~ #swImg {
  transform      : translateX(34px);    /* 丸も右へ移動       */
  background     : #78bd78;             /* カーソルタブの背景 */
}

@media screen and (max-width: 1024px){

    #editor {
        height: 50%;
        width: 100%;
        margin-bottom: 10px;
    }

    #code {
        height: 50%;
        width: 100%;
    }

    .container {
        height: 93%;
        width: 100%;
    }
}