<div class = "poemBody">

             <h1>

             <span class='slabtext'>In</span>
         <span class='slabtext'>     Side </span>
         <span class='slabtext'>Each of us </span>
         <span class='slabtext'> is a portal to God and the sun </span>
         <!-- <span class='slabtext'>it opens when we're we peeled back </span>
         <span class='slabtext'>beneath such hurt and fear </span>
         <span class='slabtext'> its outside the bounds of what screams in the mirror</span> -->
         <span class='slabtext'>We’ve mistaken our weapons and masks </span>
           <span class='slabtext'>For our mouths and lungs </span>
           <span class='slabtext'>Confused what’s happened to us </span>
           <span class='slabtext'> For what we’ve become</span>

         </h1>
       </div>
           <div class = "poemTitle">
             <div data-lining class = "vtxt">
<p>
          We humans<br /> often mistake</br> Our portals of possibility</br>
         For the certainty of a sunset
</p>
           </div>

</div>

body {
/*background-color: #0F3B72;
color: #fffff8;*/
background:#fcfcfc;
       color:#444;
       width:92%;
           padding:20px 0;
           margin:0 auto;
           transform: scale(.35);
  transform-origin: 0 0;

}

.poemBody {
  position:absolute;
  width: 66%;
}

.poemTitle{
  position:absolute;
  left: 75%;
  /*width: 66%;*/
}

.vtxt {
  /*position:absolute;*/
    font-size: 4em;
    color: #333;
    -webkit-writing-mode: vertical-rl;
    writing-mode: vertical-rl;
}
.vtxt .line:first-of-type {
    font-size: 5.5em;
    color: #D0496A;
}
.vtxt .line:first-of-type small {
    color: #333;
    font-size: .6666666em;
}


.small{
  font-size: 9px;
}
.slabtexted .slabtext
    {
    display: -moz-inline-box;
    display: inline-block;
    white-space: nowrap;
    }
.slabtextinactive .slabtext
    {
    display: inline;
    white-space: normal;
    font-size: 1em !important;
    letter-spacing: inherit !important;
    word-spacing: inherit !important;
    *letter-spacing: normal !important;
    *word-spacing: normal !important;
    }
.slabtextdone .slabtext
    {
    display: block;
    }
   function slabTextHeadlines() {
         $("h1").slabText({
             // Don't slabtext the headers if the viewport is under 380px
             "viewportBreakpoint":380
         });
     };
     // Load fonts using google font loader
     var WebFontConfig = {
         google: { families: [ 'Open+Sans:400,700:latin', 'Oswald:700:latin' ] },
         // slabText the headers when the font has finished loading (or not)
         fontactive: slabTextHeadlines,
         fontinactive: slabTextHeadlines
     };
     (function() {
         var wf = document.createElement('script');
         wf.src = 'https://ajax.googleapis.com/ajax/libs/webfont/1/webfont.js';
         wf.type = 'text/javascript';
         wf.async = 'true';
         var s = document.getElementsByTagName('script')[0];
         s.parentNode.insertBefore(wf, s);
     })();

External CSS

  1. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/slabtext.css

External JavaScript

  1. https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js
  2. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/jquery.slabtext.min.js
  3. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/lining.min.js
  4. https://s3-us-west-2.amazonaws.com/s.cdpn.io/255459/lining.effect.min.js