<NME> main.scss
<BEF> %iframepreview {
  outline: 1px solid red;

  .overlay-area & {
    outline: 2px solid blue;
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 50vh;
  }
}

.iframe-preview1,
.iframe-preview2 {
  @extend %iframepreview;
}

.overlay-area {
  position: relative;

  iframe:nth-child(2) {
    mix-blend-mode: difference;
  }
}
}

code {
  background: $color--primary;
  font-size: .8em;
  padding: .2em;
}

mark {
  background-color: $color--highlight;
  padding: .2em;
}

h1 {
}

p {
  max-width: 34em;
  margin-left: 2em;

  @media (max-width: 600px) {
    margin-left: 0em;
  }
}

h2 {
  color: $color--primary;
  margin-bottom: 0;
}

small {
  margin-bottom: 2em;
  display: block;
  font-style: italic;
  font-size: 0.75em;
}

// PREVIEW AREA

.preview-area{
  display: flex;
  flex-wrap: wrap;
  width: 100%;
  justify-content: space-between;

  .iframe-preview {
    position: relative;
    width: 49%;
    margin-bottom: 1em;

    @media (max-width: 600px) {
      width: 100%;
      display: block;
    }

    iframe {
      outline: 1px solid black;
      width: 100%;
      min-height: 40vh;
      overflow: scroll;
      background-color: white;
    }

    input {
      width: 100%;
      margin-top: 1em;
      font-size: 1em;
      padding: .4em;
      font-family: 'Exo 2';
      border: none;
    }
  }
}

.logo {
  max-width: 260px;
}

.resize-note {
  float: right;
}

.change-note {
  position: absolute;
  top: -.5em;
  left: 1em;

  .arrow-up {
    transform: rotate(180deg);
  }
}

.arrow-up {
  width: 1em;
}

// overlay area
.overlay-area {
  position: relative;
  overflow: auto;
  // width: 10px;
  min-height: $iframe-height;
  resize: both;
  cursor: nwse-resize;

  iframe {
    outline: 1px solid $color--primary;
    position: absolute;
    top: 0; left: 0;
    width: 100%;
    height: 100%;
    background-color: white;
    pointer-events: none;

    &:nth-child(2) {
      mix-blend-mode: difference;
    }
  }
}
<MSG> sorting out custom input fields

<DFF> @@ -1,25 +1,59 @@
-%iframepreview {
-  outline: 1px solid red;
+// OVERVIEW
 
-  .overlay-area & {
-    outline: 2px solid blue;
-    position: absolute;
-    top: 0;
-    left: 0;
-    width: 100%;
-    height: 50vh;
-  }
+* {
+  box-sizing: border-box;
 }
 
-.iframe-preview1,
-.iframe-preview2 {
-  @extend %iframepreview;
+body {
+  max-width: 1200px;
+  padding: 1em;
+  margin: 0 auto;
+}
+
+// PREVIEW AREA
+
+.preview-area{
+  display: flex;
+  width: 100%;
+  justify-content: space-between;
+
+  .iframe-preview {
+    outline: red solid 1px;
+    padding: 1em;
+    width: 49%;
+    margin-bottom: 1em;
+
+    iframe {
+      width: 100%;
+      min-height: 300px;
+      overflow: scroll;
+    }
+
+    input {
+      width: 100%;
+      font-size: 150%;
+      margin-top: 1em;
+      padding: .2em;
+    }
+  }
 }
 
+// overlay area
+
 .overlay-area {
   position: relative;
+  display: block;
+  width: 100%;
+
+  iframe {
+    outline: 2px solid blue;
+    position: absolute;
+    top: 0; left: 0;
+    width: 100%;
+    height: 50vh;
 
-  iframe:nth-child(2) {
-    mix-blend-mode: difference;
+    &:nth-child(2) {
+      mix-blend-mode: difference;
+    }
   }
 }
\ No newline at end of file

sorting out custom input fields