JSFiddle - React, Tailwind, and code Playground

HTML

<div class="bubble">
    <span>Small Text</span>
    <div class="bg"></div>
</div>

<div class="bubble">
    <span>Long Long Text</span>
    <div class="bg"></div>
</div>

<div class="bubble">
    <span>Long Long Long Text</span>
    <div class="bg"></div>
</div>

CSS

.bubble {
    position: relative;
    display: inline-block;
    padding: 10px 20px;
    /* height: 143px; */
    width: 200px;
    overflow: hidden;
}

.bubble:after,
.bubble:before {
    content: '';
    position: absolute;
    background-image: url(http://oi43.tinypic.com/2ltj62u.jpg);
    height: 163px;
    top: 0;
    z-index: -1;
}

.bubble:before {
    left: 0;
    width: 112px;
}

.bubble:after {
    width: 30px;
    right: 0;
    background-position: right;
}

.bg {
    background-image: url(http://oi43.tinypic.com/2s937nd.jpg);
    position: absolute;
    top: 0;
    bottom: 0;
    left: 30px;
    right: 30px;
    z-index: -2;
}

span {
    font-size: 48px;
}