Remove nested textbox wrappers

app.py

@@ -717,8 +717,8 @@ def build_demo() -> gr.Blocks:
                     instructions = gr.Textbox(
                         value="",
                         label="Instructions",
-                        show_label=True,
-                        container=True,
+                        show_label=False,
+                        container=False,
                         lines=4,
                         max_lines=8,
                         max_length=MAX_INPUT_CHARS,
@@ -727,8 +727,8 @@ def build_demo() -> gr.Blocks:
                     source_text = gr.Textbox(
                         value="",
                         label="Source text",
-                        show_label=True,
-                        container=True,
+                        show_label=False,
+                        container=False,
                         lines=10,
                         max_lines=16,
                         max_length=MAX_INPUT_CHARS,
@@ -762,8 +762,8 @@ def build_demo() -> gr.Blocks:
                     translation_output = gr.Textbox(
                         value="",
                         label="Translation",
-                        show_label=True,
-                        container=True,
+                        show_label=False,
+                        container=False,
                         interactive=False,
                         lines=18,
                         buttons=["copy"],

style.css

@@ -190,6 +190,7 @@ footer {
 #source-text-input,
 #translation-output {
   overflow: hidden;
+  position: relative;
   border: 1px solid var(--mushroom-300) !important;
   background: #fff !important;
   box-shadow: none !important;
@@ -217,28 +218,13 @@ footer {
   background: #f0f2f3 !important;
 }
 
-#instructions-input > .wrap,
-#source-text-input > .wrap,
-#translation-output > .wrap,
-#instructions-input label,
-#source-text-input label,
-#translation-output label {
-  height: 100% !important;
-  min-height: 0 !important;
-}
-
-#instructions-input label,
-#source-text-input label,
-#translation-output label {
-  display: flex !important;
-  flex-direction: column;
-}
-
-#instructions-input .block-info,
-#source-text-input .block-info,
-#translation-output .block-info {
-  flex: 0 0 auto;
-  padding: 14px 20px 0;
+#instructions-input::before,
+#source-text-input::before,
+#translation-output::before {
+  position: absolute;
+  top: 13px;
+  left: 20px;
+  z-index: 1;
   color: var(--volcanic-500) !important;
   font-family: var(--sans) !important;
   font-size: 10px !important;
@@ -246,13 +232,19 @@ footer {
   line-height: 1.2 !important;
   letter-spacing: 0.04em;
   text-transform: uppercase;
+  pointer-events: none;
 }
 
-#instructions-input .input-container,
-#source-text-input .input-container,
-#translation-output .input-container {
-  flex: 1 1 auto;
-  min-height: 0 !important;
+#instructions-input::before {
+  content: "Instructions";
+}
+
+#source-text-input::before {
+  content: "Source text";
+}
+
+#translation-output::before {
+  content: "Translation";
 }
 
 #instructions-input textarea,
@@ -260,7 +252,7 @@ footer {
 #translation-output textarea {
   height: 100% !important;
   min-height: 0 !important;
-  padding: 7px 20px 16px !important;
+  padding: 34px 20px 16px !important;
   overflow-y: auto !important;
   resize: none !important;
   border: 0 !important;