<div id="wrapper">
  <section class="mast"></section>
  <section class="paper" contenteditable="true">
    A writers dream... and then some!
<footer><p>Based on a pen from <a href="https://codepen.io/camila_waz/pen/MzrgjE" target="_blank">Camila Waz</a> | Modifications:</p>
    <li>Updated the code with semantic tags |</li>
    <li>Removed the height from the .notepad to allow it to grow |</li>
    <li>Removed the align-items: center from the wrapper to allow it expand</li>    
@import url('https://fonts.googleapis.com/css?family=Caveat');

font-family: 'Caveat', cursive;

#wrapper {
  width: 100%;
  min-height: 120vh;
  display: flex;
  justify-content: center;
  padding: 50px 30px;

main {
  width: 70%;
  max-width: 600px;
  box-shadow: 10px 10px 40px rgba(0, 0, 0, 0.15);
  border-radius: 0 0 25px 25px;
  overflow: hidden;

.mast {
  width: 100%;
  height: 50px;
  background: #589;
  border-radius: 10px 10px 0 0;

.paper {
  width: 100%;
  height: 100%;
  padding: 35px 20px;
  background: repeating-linear-gradient(#eee, #eee 34px, #eee 34px, #589 35px);
  font-family: 'Caveat', cursive;
  line-height: 35px;
  font-size: 26px;
  outline: 0;

footer {
  font-size: small;

footer ul {
  padding: 0;
  list-style-type: none;

footer ul li {
display: inline-block;

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.