JSFiddle - React, Tailwind, and code Playground

by Charles Daniels

HTML

<div class="outer">
    <div class="borderImage">
        <img class="torb" src="http://i58.tinypic.com/2chuwrd_th.png" />
    </div>
    <span class="helper" style="float:left"></span>
    <div class="side" style="float:left">
        <img class="lorr" src="http://i58.tinypic.com/2chuwrd_th.png" />
    </div>
    <div class="side" style="float:right">
        <img class="lorr" src="http://i58.tinypic.com/2chuwrd_th.png" />
    </div>
    <div class="inner">WELCOME</div>
    <div class="borderImage">
        <img class="torb" src="http://i58.tinypic.com/2chuwrd_th.png" />
    </div>    
</div>
<pre>
    
</pre>
<p>I want to achieve this:</p>
<img src="http://i.stack.imgur.com/Sgrb0.png" alt="#" />

CSS

div.outer {
    width: 200px;
    outline: 4px solid #000000;    
}

.helper {
    display: inline-block;
    height: 100%;
    vertical-align: middle;
}

.side {
    height: 60px;      /* equals max image height */
    white-space: nowrap;
    text-align: center; margin: 1em 0;
}

img.torb {
    display: block;
    width: 30px;
    height: 30px;
    margin: 0px auto;
}

img.lorr {
    display: block;
    width: 30px;
    height: 30px;
    vertical-align: middle;
}

div.inner {
    background-color: #99FF00;
    line-height: 60px;
    text-align:center;
    font-family: arial;
    color: #454545;
    font-size: 20px;
    height:60px;
    border-left: 30px solid white;
    border-right: 30px solid white;
}