JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container content">
      <pre>
      Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text Preformatted Text 
      </pre>
    </div>
    <div class="navbar-inverse">
      <div class="container">
        <p class="navbar-text pull-left">
          ©
        </p>
      </div>
    </div>

CSS

body{
  display: flex;
  min-height: 100vh;
  flex-direction: column;
}

.content{
  flex: 1;
}

@media only screen and (max-width: 768px) {
	.content {
		width: 100%;
	}
}