JSFiddle - React, Tailwind, and code Playground

python rpn form layout

by Andy Bulka

HTML

<section class="container">
  <div class="left-half">
    <article>

      <h1>Enter Python Source Code:</h1>

      <form method="POST" action="/">
        <textarea class="python" id="id_python_text" name="source">def main():
          pass

          def useful():  # rpn: export
          pass

          main()
          useful()

          x = 100
        </textarea>
        <input class="submit_button" type="submit" value="Convert">
        <br>
        <label for="comments">Generate comments</label> <input id="comments" name="comments" type="checkbox" value="y">
        <br>
        <label for="line_numbers">Generate line numbers</label> <input checked="" id="line_numbers" name="line_numbers" type="checkbox" value="y">
        <br>
      </form>
    </article>
  </div>
  <div class="right-half">
    <article>
      <pre>
rpn rpn rpn
rpn rpn rpn
rpn rpn rpn
     </pre>
    </article>
  </div>
</section>

CSS

.python {
  width: 100%;
  /*height: 30em;*/
  /*height: 100%;*/
  /*flex: 1; !* consume available width *!*/
  font-family: monospace;
  font-size: large;
}

article {
  padding: 1rem;
  height: 100%;
  border-color: #aa1111;
  border-bottom-width: thick;
}

h1 {
  font-size: 1.75rem;
  margin: 0 0 0.75rem 0;
}

/* Pattern styles */
.container {
  display: grid;
}

.left-half {
  background: #ff9e2c;
  grid-column: 1;
}

.right-half {
  background: #f4ffd7;
  grid-column: 2;
  font-family: "Monotype Corsiva", "Apple Chancery", "URW Chancery L", cursive;
  font-size: larger;
}