<div class="outer">
  <div class="inner">
<p>Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vestibulum tortor quam, feugiat vitae, ultricies eget, tempor sit amet, ante. </p>  
    
  </div>
</div>
.outer {
  position:relative;
  width: 50%;
  border: 2px solid #cc3f85;
}

.inner {
  position:absolute;
  left:50%;
  transform:translateX(-50%);
  width: 50%;
  border: 2px solid #66d9ef;
}

External CSS

  1. https://fonts.googleapis.com/css?family=Lato

External JavaScript

This Pen doesn't use any external JavaScript resources.