JSFiddle - React, Tailwind, and code Playground

HTML

<div class="regulator"><div>Holder of content that will adjust by 22px as it grows in height, assuming that you are careful about how you do it. Keep things in 22px increments (note the padding is 11px on top and bottom, so 22px total... could be 22px at each end). Start by using a 22px line-height. That will keep text lines adding 22px with each line.</div></div>

<div class="regulator largertext"><div>Larger text if you don't like the gap in text above. Holder of content that will adjust by 22px as it grows in height, assuming that you are careful about how you do it. Keep things in 22px increments (note the padding is 11px on top and bottom, so 22px total... could be 22px at each end). Start by using a 22px line-height. That will keep text lines adding 22px with each line.</div></div>

CSS

.regulator {
    line-height: 22px;
    border: 1px solid blue;
    padding: 11px;
    background: url(http://dummyimage.com/22x22/00ffb3/000000.png&text=22px) top center repeat-y;
}

.largertext {font-size: 18px;}