JSFiddle - React, Tailwind, and code Playground

HTML

<div class='divider'><span class='left'></span><span class='middle'></span><span class='right'></span></div>

CSS

div.divider {
    position: relative;
    width: 100%;
    min-width: 40px;
    height: 10px;
    background: url('http://files.moka.co/temp/divider.png') repeat-x 0 0;
}
div.divider > .left {
    float: left;
    width: 6px;
    height: 10px;
    background: url('http://files.moka.co/temp/divider.png') no-repeat -22px -10px;
}
div.divider > .right {
    float: right;
    width: 6px;
    height: 10px;
    background: url('http://files.moka.co/temp/divider.png') no-repeat 0 -10px;
}
div.divider > .middle {
    position: absolute;
    width: 28px;
    height: 10px;
    left: 50%;
    margin-left: -14px;
    background: url('http://files.moka.co/temp/divider.png') no-repeat 0 -10px;
}