CodePen

HTML

            
              <div>
  <p>One</p>
  <p>Two</p>
  <p>Three</p>
  <p>Four</p>
  <p>Five</p>
  <p>Six</p>
  <p>Seven</p>
  <p>Eight</p>
</div>
            
          
!

CSS

            
              * {
  margin:0;
  padding:0;
}

div { 
  -webkit-column-count:2;
  -moz-column-count:2;
  column-count:2; 
  -webkit-column-width:450px;
  -moz-column-width:450px;
  column-width:450px;         
  -webkit-column-gap:40px;
  -moz-column-gap:40px;
  column-gap:40px;         
  height:8em;  
  width:940px;
  background-color:black;
  line-height:2em;
  margin:40px;
}         

p {               
  outline:1px solid gray; 
  position:relative;  
  width:100%;
  text-align:center;
}  

p:nth-of-type(1) {
  background-color:red;
  top:-1em;
}
p:nth-of-type(2) {
  background-color:orange;
  left:-50%;  
}
p:nth-of-type(3) {
  background-color:yellow;  
  left:50%;
}
p:nth-of-type(4) {
  background-color:green;
  top:2em;  
}
p:nth-of-type(5) {
  background-color:blue;
  top:-1em;  
}
p:nth-of-type(6) {
  background-color:indigo;
  left:-50%;  
}
p:nth-of-type(7) {
  background-color:violet;
  left:50%;      
}
p:nth-of-type(8) {
  background-color:silver;
  left:50%;
  top:8em;  
}

            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................