JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrap">
                <div class="img1"><div class="text">text</div></div>
                <div class="img2"><div class="text">text<br>
                    text<br>
                    text<br>
                    text<br>
                    text<br>
                    text<br>
                    text<br>
                    </div></div>
                <div class="img1"><div class="text">text<br>
                    text<br>
                    text<br>
                    text<br>
                    text<br>
                    text<br>
                    text<br>
                    text<br>
                    text<br>
                    text<br>
                    text<br>
                    text<br>
                    text<br>
                    text<br>
                    text<br>
                    text<br>
                    text<br>
                    text<br>
                    text<br>
                    </div></div>
            </div>

CSS

.wrap {
    width: 100%;
    background: #252525;
    overflow: hidden;
}

.img1, .img2 {
    background: #bfbfbf url('http://www.psdgraphics.com/file/colorful-triangles-background.jpg') no-repeat center center;
    width: 98%;
    margin: 1%;
    position: relative;
    overflow:hidden;
}

.text {
    width: 28%;
    min-height: 100px;
    max-height: 300px;
    padding: 1%;
    background: #bfbfbf;
    overflow:auto;
}
.img1 .text {
    float: left;
    border-right: 3px solid #252525;
}
.img2 .text {
    float: right;
    border-left: 3px solid #252525;
}