JSFiddle - React, Tailwind, and code Playground

by suresh ponnukalai

HTML

<div class="wrap">
    <div class="left"></div>
    <div class="inner">
        <p>Text goes here</p>
    </div>
    <div class="right"></div>
</div>

CSS

.wrap {
    position:relative;
    width:100%;
    overflow:hidden;
    display:table;
    table-layout:fixed;
}
.wrap .left {
    background:#ff00ff url(../img/banner_small_left.png) 0 0 no-repeat;
    width:25px;
    height:123px;
    float:left;
    display:table-cell;
}
.wrap .inner {
    background:url(../img/banner_small_mid.png) 0 0 repeat-x;
    height:123px;
    display:table-cell;
    overflow:hidden;
}
.wrap .right {
    background:#fff000 url(../img/banner_small_right.png) 0 0 no-repeat;
    width:25px;
    height:123px;
    float:right;    
    display:table-cell;
}