JSFiddle - React, Tailwind, and code Playground

by colintoh

HTML

<!-- 
Image Resources
Left           : http://i.imgur.com/ERwq8Fo.png
Right          : http://i.imgur.com/p62xysu.png
Intended result: http://imgur.com/V65KOEG (Ignore the font style)


Purpose of test
Use minimal markup to achieve a dynamic scalable layout. 
-->

<div class="box">VERY LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG LONG DYNAMIC HEADER</div>

CSS

body {
    text-align: center;
}

.box {
    display: inline-block;
    position: relative;
    padding: 0 20px;
    margin: 0 210px;
}

.box:before {
    content: "";
    position: absolute;
    left: -190px;
    top: 0;
    width: 190px;
    height: 100%;
    background: url('http://i.imgur.com/ERwq8Fo.png') no-repeat center;
}

.box:after {
    content: "";
    position: absolute;
    right: -190px;
    top: 0;
    width: 190px;
    height: 100%;
    background: url('http://i.imgur.com/p62xysu.png') no-repeat center;
}