vertical rhythm

by Richard Hunter

HTML

<link rel="stylesheet" href=" https://cdnjs.cloudflare.com/ajax/libs/meyer-reset/2.0/reset.css">
<div class='container'>
<div class='foo'>
    <h2>hello I love you wont you tell me your name?</h2>
     <h3>it's the end of the world</h3>
   At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, id est laborum et dolorum fuga. Et harum quidem rerum facilis est et expedita distinctio. Nam libero 
</div>
    <div class='bar'>
         <h2>hello I love you wont you tell me your name?</h2>
        <h3>it's the end of the world</h3>
   At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, 
</div>
      <div class='blah'>
         <h2>hello I love you wont you tell me your name?</h2>
        <h3>it's the end of the world</h3>
   At vero eos et accusamus et iusto odio dignissimos ducimus qui blanditiis praesentium voluptatum deleniti atque corrupti quos dolores et quas molestias excepturi sint occaecati cupiditate non provident, similique sunt in culpa qui officia deserunt mollitia animi, 
</div>
</div>

SCSS

.container {
    font-size : 16px;
}
h2 {
    font-size : 1.4em;
    font-weight : 700;
    margin-bottom : 0.535714285em;
}
h3 {
    font-size : 0.8em;
    font-style : italic;
    margin-bottom:0.9375em;
    
}
.foo, .bar, .blah {
    background : #ddd;
    width : 25%;
    padding :  0.75em;
    padding-bottom : 0.75em;
    border : solid 1px #aaa;
    line-height : 1.5em;
    margin : 20px;
    background-image: linear-gradient(#666 1px, transparent 1px);
    background-size: 100% 1.5em;
}
.bar {
    font-size : 0.5rem;
     background : pink;
     background-image: linear-gradient(red 1px, transparent 1px);
     background-size: 100% 1.5em;
    width : 25%;
}
.blah {
    font-size : 0.3rem;
    width : 25%;
    background : yellow;
    background-image: linear-gradient(blue 1px, transparent 1px);
    background-size: 100% 1.5em;
}