CSS3 break-after (Interactive Example)

<!doctype html>
<title>Example</title>
<style>
.multicol {
  background-color: beige;
  padding: 10px;

/* Safari and Chrome */
  -webkit-column-count: 3;
  -webkit-column-rule: 2px dotted olivedrab;

/* Firefox */
  -moz-column-count: 3; 
  -moz-column-rule: 2px dotted olivedrab;

/* CSS3 */
  column-count: 3; 
  column-rule: 2px dotted olivedrab;
}

.multicol hr {
  break-after: column;
}
</style>
<div class="multicol">
  <h3>Legs</h3>
  <p>The key is to use good form, and not to over train your muscles. You need to let your muscles rest in between workouts. Give them 3 or 4 days to rest before training them again. Follow up each workout with a protein shake and your legs will never be the same.</p>
  <hr>
  <h3>Chest</h3>
  <p>Your chest muscles are a large part of your upper body. To achieve maximum results, your chest workout routine should include at least one compound exercise (to work your overall chest) followed as well as a more concentrated exercise. You can also single out either your upper chest or your lower chest if you need to.</p>
</div>