JSFiddle - React, Tailwind, and code Playground
HTML
<div class="top"></div>
<div class="left"></div>
<div class="right"></div>
CSS
.top {
position: relative;
}
.top::after {
position: absolute;
content: '';
left: 48%;
top: 100%;
width: 30px;
height: 500px;
background: url("http://bipbap.ru/wp-content/uploads/2017/09/Cool-High-Resolution-Wallpaper-1920x1080-640x360.jpg") no-repeat 0 0;
}
.left,
.right {
float: left;
width: 50%;
padding: 20px;
}
JavaScript
$(".bred").each(function(){
var $img = $(this).children("img");
var $descendant = $(this).children(".bred_descendant");
var h = $img.height();
$(this).css({"min-height":h + "px", "background-image":"url('" + $img.attr("src") + "')", "background-size":"contain", "background-repeat":"no-repeat"}) ;
$img.css("display", "none");
$descendant.css("position", "static");
});