<html>
  <body>
    <div class="container">
      <h1>CSS Quickies</h1>
      <p class="p1">
        col 1 Lorem ipsum dolor sit, amet consectetur adipisicing elit. Eveniet at voluptas quo reprehenderit iusto labore rem architecto itaque placeat laboriosam aliquid inventore temporibus facere, aperiam odio eius earum illum dolorum.
      </p>
      <p class="p2">
        col 2 Lorem ipsum dolor sit amet consectetur adipisicing elit. Ullam ducimus nostrum possimus id, similique reiciendis amet quo. Possimus enim sequi natus sint minus autem non laudantium cumque, ab nobis ipsam!
      </p>
      <h2>I'm a sub header that spans the complete length</h2>
      <p class="p3">
        Lorem ipsum dolor sit amet consectetur, adipisicing elit. Libero blanditiis, facilis animi iusto eveniet corporis veniam aliquid excepturi voluptates totam, sed tenetur omnis, impedit id voluptas veritatis delectus similique vitae.
      </p>
    </div>
  </body>
</html>
.container {
  column-count: 3;
  column-width: 280px;
  column-rule: 3px dashed #ccc;
  column-gap: 20px;
}
p{
  margin: 0;
}

h2 {
  column-span: all;
  background-color: #666;
  color: white;
}

.p1,
.p2,
.p3{
  background-color: #f5f5f5;
}

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.