JSFiddle - React, Tailwind, and code Playground

HTML

<article class="wrapper">
    <h2>Default placement</h2>
    <div class="first">Hello g World<br />Lorem ipsum...</div>
    <div class="second">Hello g World<br />Lorem ipsum...</div>
    <div class="first">Hello g World<br />Lorem ipsum...</div>
    <section class="rel">
     <h2>Using position:relative and top</h2>
        <div class="first">Hello g World<br />Lorem ipsum...</div>
        <div class="second">Hello g World<br />Lorem ipsum...</div>
        <div class="first">Hello g World<br />Lorem ipsum...</div>
  </section>

    <section class="ptop">
    <h2>Using padding</h2>
        <div class="first">Hello g World<br />Lorem ipsum...</div>
        <div class="second">Hello g World<br />Lorem ipsum...</div>
        <div class="first">Hello g World<br />Lorem ipsum...</div>
    </section>
</article>

CSS

article {
  background-image: linear-gradient(to bottom, rgba(0,0,0,.15) 0%, transparent 5%, transparent 100%);
  background-repeat: repeat;
  background-position: top left;
  background-size: 100% 20px;
  padding: 0;
  line-height: 20px;
}

div {
  margin: 20px;
}

h2 {
   font-size: 24px;
   line-height: 40px;
}

.first {
   font-size: 16px;
}

.second {
  font-size: 30px;
  line-height: 40px;
}

.ptop .first {
    padding-top: 24px;
    padding-bottom: 16px;
    margin: 0 20px; /* get rid of the massive gap! */
}

.ptop .second {
    padding-top: 30px;
    padding-bottom: 10px;
    margin: 0 20px; /* get rid of the massive gap! */
}

.rel, .rel .first, .rel .second {
   position: relative;
}
.rel .first {
    top: 4px;
}
.rel .second {
    top: 9px;
}