CSS Columns

Purely CSS made column dividers.

<!DOCTYPE html>
<html >
<head>
  <meta charset="UTF-8">
  <title>CSS Columns</title>
  
  
  
      <style>
      /* NOTE: The styles were added inline because Prefixfree needs access to your styles and they must be inlined if they are on local disk! */
      #wrapper {
  width: 60%;
  margin: auto;
  font-family: sans-serif;
}

p {
  column-count: 3;
  column-gap: 20px;
  column-rule-style: solid;
  column-rule-color: orange;
}

p::first-line {
  font-weight: bold;
}
    </style>

  <script src="https://cdnjs.cloudflare.com/ajax/libs/prefixfree/1.0.7/prefixfree.min.js"></script>

</head>

<body>
  <div id="wrapper">
  <h2>About us</h2>
  <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Maecenas pellentesque tempor metus eget fringilla. Mauris nulla purus, ultricies sit amet sollicitudin id, tristique eget velit. Quisque et massa mi. Phasellus vulputate augue sed magna sollicitudin vel imperdiet justo consequat. Ut euismod rutrum ultrices. Pellentesque vitae mi elit, at rhoncus est. Curabitur dignissim semper varius. Donec tempus lectus a massa venenatis fringilla. Mauris feugiat nulla a lacus congue id aliquet massa tincidunt. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Praesent malesuada pharetra arcu, id adipiscing lorem facilisis sed. Praesent lectus sapien, consectetur nec placerat nec, consectetur sit amet felis.

Praesent adipiscing ligula a metus dictum molestie vitae ut nibh. Donec libero metus, vulputate sed luctus ac, faucibus at enim. Sed nec est et arcu mattis malesuada sed id nisi. Sed magna magna, imperdiet at dignissim non, vehicula eget ipsum. Vivamus nec enim in ante auctor porttitor. Suspendisse nisi nibh, fermentum et dapibus consectetur, gravida pharetra justo. Maecenas euismod sodales hendrerit. Vestibulum condimentum vulputate sapien, eu consectetur sem lobortis et. Sed lorem dolor, congue at venenatis in, bibendum vel elit. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Sed sodales, augue a tempus elementum, ipsum leo venenatis libero, non consequat nisi est eu nibh. Nulla facilisi. Vivamus malesuada varius metus, eget commodo ligula consequat et. Quisque in nisl quam.</p>
</div>
  
  
</body>
</html>
/* Downloaded from https://www.codeseek.co/ */
#wrapper {
  width: 60%;
  margin: auto;
  font-family: sans-serif;
}

p {
  column-count: 3;
  column-gap: 20px;
  column-rule-style: solid;
  column-rule-color: orange;
}

p::first-line {
  font-weight: bold;
}
/* Downloaded from https://www.codeseek.co/ */

This awesome code ( CSS Columns ) is write by Rafael Luque, you can se more from this user in the personal repository

You can find the original code on Codepen.io

2018 © Rafael Luque