reportout

by Michael Prosser

HTML

<div class="printer-report">
  <div class="col-left">
    <div class="section-initialthoughts">
      <h6>Initial Thoughts</h6>
      <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
    </div>
    <div class="section-multipleperspectives">
      <h6>Multiple Perspectives</h6>
    <ul>
    <li>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </li>
      <li>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </li>
      <li>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </li>
      <li>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </li>
      </ul>
    </div>
  </div>
  <div class="col-right">
    <div class="section-reflectedthoughts">
      <h6>Reflected Thoughts</h6>
      <h5>
      What were you surprised by?
      </h5>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
      <h5>
      What did you already know but now see in a new light?
      </h5>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
      <h5>
      What do you still need help with?
      </h5>
    <p>
      Lorem ipsum dolor sit amet, consectetur adipiscing elit.
      </p>
    </div>
  </div>
  <div class="col-clear"></div>
  <div class="col-full">
    <div class="section-revisedthoughts">
      <h6>Revised Thoughts</h6>
    
    </div>
  </div>
</div>

CSS

.printer-report{
  position:relative;
  max-width: 970px;
  margin-left:auto;
  margin-right:auto;
  font-family: 'Source Sans Pro', sans-serif;
}
.printer-report .col-left{
  position:relative;
  float:left;
  width:30%;
}
.printer-report .col-right{
  position:relative;
  float:right;
  width:calc(70% - 22px);
}
.printer-report .col-clear{
  clear:both;
}
.printer-report .col-full{
  position:relative;
  float:none;
}
.printer-report h6{
      position: absolute;
    left: 40px;
    top: -16px;
    text-transform: uppercase;
    font-size: 14px;
}
.printer-report p{
    font-size: 18px;
    margin-top:10px;
    margin-bottom:25px;
}
.printer-report ul{
    list-style-image: url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAABS2lUWHRYTUw6Y29tLmFkb2JlLnhtcAAAAAAAPD94cGFja2V0IGJlZ2luPSLvu78iIGlkPSJXNU0wTXBDZWhpSHpyZVN6TlRjemtjOWQiPz4KPHg6eG1wbWV0YSB4bWxuczp4PSJhZG9iZTpuczptZXRhLyIgeDp4bXB0az0iQWRvYmUgWE1QIENvcmUgNS42LWMxMzggNzkuMTU5ODI0LCAyMDE2LzA5LzE0LTAxOjA5OjAxICAgICAgICAiPgogPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4KICA8cmRmOkRlc2NyaXB0aW9uIHJkZjphYm91dD0iIi8+CiA8L3JkZjpSREY+CjwveDp4bXBtZXRhPgo8P3hwYWNrZXQgZW5kPSJyIj8+IEmuOgAAAHNJREFUOI1jYBgFFANGGON/FV8UAwODPZH6TjG2fZrLwMDAwIIkaMPAwJBGpAE8DAwMcxkYGBiYiNSAE7DgEF/GwMBwEE3MjIGBIZlYA44wMDDMQhP7gs0Air0w8AbgCgMbBgaGv2hiZqQYEAXFBAHFXgAA+goNQ9DF8l0AAAAASUVORK5CYII=);
    margin-left: 0px;
    padding: 0px;
    padding-left: 12px;
}
.printer-report ul li{
  margin-bottom:3px;
}



.section-initialthoughts{
 ...