JSFiddle - React, Tailwind, and code Playground

HTML

<div class="holder">
    <img src="http://placekitten.com/200/300" alt="" /> 
    <span class="frame"><span class="box">some text</span></span> 
</div>

CSS

.holder{
    display: inline-block;
    position: relative;
}
.holder img{
    max-width:100%;
    vertical-align:top;
}
.frame{
    height:100%;
    letter-spacing: -0.36em;
    left: 0;
    position: absolute;
    top: 0;
    width:100%;
    white-space: nowrap;
}
.frame:after{
    content: '';
    display: inline-block;
    height: 100%;
    vertical-align: middle;
    width:1px;
}
.box{
    color:#fff;
    display: inline-block;
    letter-spacing: 0;
    text-align:center;
    vertical-align: middle;
    white-space: normal;
    width:100%;
}