JSFiddle - React, Tailwind, and code Playground

HTML

<div class="title">
<div class="center">
    CENTERCENTERCENTERCEN
    <div class="left">
       testtest<img src="http://i.imgur.com/7bvErJN.jpg" />
    </div>
    <div class="right">
       <img src="http://i.imgur.com/q8Mq0YZ.jpg" />
    </div>
</div>
</div>

CSS

* {
    height: 100%;
    position: relative;
}
body {
    height: 200px;
}
/* just to get rid of scrollbar */
 p {
    margin: 0;
}
.title {
    background: #aaa;
    height: 22px;
    text-align:center;
    margin: 0 auto;
    width: 400px;
}
.container {
    background: #abc;
    width:100%;
}
.lr {
    position:absolute;
    top:0;left:0;
    width:100%;
}
.left {
    background: green;
    position:absolute;
    top:0;left:0;
    transform:translateX(-100%)
}
.center {
    position:relative;
    display:inline-block;
    background: red;
    z-index: 2;
}
.right {
    background: blue;
    position:absolute;
    top:0;right:0;
    transform:translateX(100%)
}
.left img, .right img {
    height: 100%;
}