JSFiddle - React, Tailwind, and code Playground

HTML

<div id="wrapper">
    <img src="http://www.prelovac.com/vladimir/wp-content/uploads/2008/03/example.jpg" />
    <div id="abs">
        <div id="leftbutton">left button</div>
        <div id="body">
            <div id="title"><h2>Title</h2></div>
        </div>
        <div id="rightbutton">right button</div>
    </div>
</div>

CSS

#wrapper { width: 400px; background: #e4e4e4; margin: 0 auto; }
#abs { position: absolute; top: 0; bottom: 0; height: 100%; }
#leftbutton,
#rightbutton,
#body{ float: left; position: relative; }
#leftbutton,
#rightbutton { width: 100px; background: #ccc; height: 300px; opacity: .6 }

#body { width: 200px; }

#title { width: 100px; margin: 0 auto; background: red; }