JSFiddle - React, Tailwind, and code Playground

PURE 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>
        <br>
        <br>
      </form>
    </article>
  </div>
  <div class="right-half">
    <article>
      <pre>
  rpn rpn rpn
  rpn rpn rpn
  rpn rpn rpn
  rpn rpn rpn
       </pre>
    </article>
  </div>
  <div>
    <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">
  </div>
  <div>
    <input class="submit_button" type="submit" value="Convert">
  </div>
</section>

CSS

.container {
  display: grid;
  grid-template-columns: auto auto auto;
  grid-gap: 5px;
  /* grid-auto-rows: minmax(100px, auto); */
}

.container > div {
  border: 2px solid rgb(233, 171, 88);
  border-radius: 5px;
  background-color: rgba(233, 171, 88, .5);
  padding: 1em;
  color: #d9480f;
}

.left-half {
  /* grid-column: 1 / 3; */
  grid-column: 1 / span 2;
  /* grid-row: 1 / 2; */
}

.right-half {
  grid-column: 3;
  /* grid-row: 1 / 3; */
}

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

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

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


/* Pattern styles */

.XXcontainer {
  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;
} */