JSFiddle - React, Tailwind, and code Playground

HTML

<article>
    
    <div class="left">
    </div>
    
    <div class="middle">
        <p>hello<br/>moto</p>
    </div>
    
    <div class="right">
    </div>
    
    <div class="cb"></div>
    
</article>

CSS

p { margin: 0px; padding: 0px; }

article {
    background: #222;
    width: 60%;
}

.cb {
    clear: both;
}

article div {
	-webkit-box-sizing: border-box;
	-moz-box-sizing: border-box;
	box-sizing: border-box;
}

.left, .middle, .right {
    float: left;
    height: 200px;
}

.left {
    background: #aaa;
    width: 20%;

}

.right {
    background: #aaa;
    width: 20%;
}

.middle {
    position: relative;
    background: #ccc;
    width: 60%;
    overflow: hidden;
}

.middle p {
    position: absolute;
    width: 110%;
    bottom: 0px;
    left: 0px;
    background: #555;
    color: #fff;
    text-align: center;
    line-height: 80%;
    padding: 5px 0px;
}