* { box-sizing: border-box; }
    body {
      margin: 0;
      display: flex;
      flex-direction: column;
      height: 100vh;
      font-family: sans-serif;
    }

    .top {
      display: flex;
      flex-direction: column;
      padding: 10px;
      background: #f0f0f0;
    }

    select {
      width: 200px;
      padding: 8px;
      margin-bottom: 10px;
    }

    textarea {
      width: 100%;
      height: 200px;
      font-family: monospace;
      padding: 10px;
      resize: vertical;
      font-size: 14px;
      border: 1px solid #ccc;
    }

    iframe {
      flex: 1;
      border: none;
      width: 100%;
    }

    @media (min-width: 768px) {
      body {
        flex-direction: row;
      }

      .top {
        width: 40%;
        height: 100vh;
        border-right: 1px solid #ddd;
      }

      textarea {
        height: calc(100vh - 60px);
      }

      iframe {
        width: 60%;
        height: 100vh;
      }
    }