<link href="https://fonts.googleapis.com/css?family=Corben:700" rel="stylesheet">

<strong class="mad">MAD LIBS</strong><br>
<!--<br><br><button id="randomize-all">RANDOMIZE ALL</button>-->
<div id="input-block">
  <ul>
    <li><label for="verb1">VERB</label> <input type="textbox"  class="verb1" /><!--<button>RANDOMIZE!</button>--></li>
    <li><label for="adjective1">ADJECTIVE</label> <input type="textbox" /></li>
    <li><label for="verb1">VERB</label> <input type="textbox" class="verb2" /></li>
    <li><label for="noun-plural1">NOUN (PLURAL)</label> <input type="textbox" /></li>
    <li><label for="weapon-plural">WEAPON (PLURAL)</label>	<input type="textbox" /></li>
    <li><label for="adjective2">ADJECTIVE</label> <input type="textbox" /></li>
    <li><label for="noun1">NOUN</label>	<input type="textbox" /></li>
    <li><label for="food-plural-1">FOOD (PLURAL)</label>	<input type="textbox" /></li>
    <li><label for="verb2">VERB</label>	<input type="textbox" /></li>
    <li><label for="adjective3">ADJECTIVE</label>	<input type="textbox" /></li>
    <li><label for="noun2">NOUN</label><input type="textbox" /></li>
    <li><label for="verb3">VERB</label><input type="textbox" /></li>
    <li><label for="noun3">NOUN</label><input type="textbox" /></li>
    <li><label for="verbed">VERB ENDING IN "ED"</label><input type="textbox" /></li>
    <li><label for="noun4">NOUN</label><input type="textbox" /></li>
    <li><label for="adjective4">ADJECTIVE</label><input type="textbox" /></li>
  <br><button id="submit">GO MAD!!!</button>
    </div>
  <div id="excerpt">
    To <span class="blank">_____</span>, or not to <span class="blank">_______</span>,--that is the question:-- <br>
    Whether `tis more <span class="blank">_____</span> in the mind to <span class="blank">_____</span> <br>
    The <span class="blank">_____</span> and <span class="blank">____</span> of <span class="blank">_____</span> fortune <br>
    Or to take <span class="blank">_____</span> against a sea of <span class="blank">______</span>, <br>
    And by opposing end them?--To die,--to <span class="blank">_____</span>,-- <br>
    No more; and by a <span class="blank">_____</span> to say we end <br>
    The heartache, and the thousand <span class="blank">_____</span> shocks <br>
    That flesh is heir to,--`tis a <span class="blank">_____</span> <br>
    Devoutly to be wish`d. To die,--to <span class="blank">_____</span>;-- <br>
    To <span class="blank">_____</span>! perchance to dream:--ay, there`s the <span class="blank">_____</span>; <br>
    For in that <span class="blank">_____</span> of death what dreams may come, <br>
    When we have <span class="blank">_____</span> off this mortal <span class="blank">_____</span>, <br>
Must give us pause: there`s the respect <br>
    That makes calamity of so <span class="blank">_____</span> life...	<br> <br><button id="try-again">GO <strong>MAD AGAIN!!!</button>
</div>
.mad {
  font-family: "Corben";
  font-size: 30px;
}

body {
  font-family: Helvetica;
  margin: 50px 100px;
}

ul {
  list-style-type: none;
}

li {
  margin: 5px 0;
}

input {
  width: 150px;
}

label {
  display: inline-block;
  width: 230px;
}

input {
  margin-left: 15px;
}

#input-block {
  float: left;
  display: block;
  margin-right: 100px;
}

#excerpt {
  float: left;
  display: block;
}

em {
  color: crimson;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.min.js