JSFiddle - React, Tailwind, and code Playground

HTML

<p class="dotbg"><span>Left</span><span class="right">Right</span></p>
<p class="dotbg"><span>Some text</span><span class="right">some bad text</span></p>
<p>Some text<span class="dotbg2"></span>some bad text</p>

CSS

.dotbg{
    line-height: 12px;
    background: url('http://i.imgur.com/L8CQg.png') bottom repeat-x;    
    width: 250px; /* this is only for showcase */
    margin: 0 auto 1.5em auto; /* this is only for showcase */
    
}
    .dotbg span{
        padding: 0 5px;    
        background: #fff;
    }
    .dotbg .right{
        float: right;
    }