JSFiddle - React, Tailwind, and code Playground
HTML
<div class="workwrapper">
<div class="boxcontainer columns workrow ">
<div class="box six nomargin workbox imgbox worktall nooverflow relative">
<div class="imgbg" style="background-image: url('http://placekitten.com/560/700');"></div>
</div>
<div class="box six nomargin workbox imgbox workthumb nooverflow relative">
<div class="imgbg" style="background-image: url('http://placekitten.com/560/350');"></div>
</div>
<div class="box six nomargin workbox textbox nooverflow relative">
<p>“Lorem ipsum dolor sit amet, consectetaur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua..”</p>
<p><span class="grey">Lisa Kudrow</span></p>
</div>
</div>
</div>
CSS
.workwrapper {
max-width: 43.750rem;
background-color: rgba(125, 0, 0, 0.2);
}
.workrow {
max-height: 31.250rem;
margin-left: 0;
display: -webkit-box;
display: -ms-flexbox;
display: -webkit-flex;
display: flex;
-webkit-flex-wrap: wrap;
-ms-flex-wrap: wrap;
flex-wrap: wrap;
-webkit-box-orient: vertical;
-webkit-box-direction: normal;
-webkit-flex-direction: column;
-ms-flex-direction: column;
flex-direction: column;
-webkit-align-content: space-between;
-ms-flex-line-pack: justify;
align-content: space-between;
-webkit-box-pack: justify;
-webkit-justify-content: space-between;
-ms-flex-pack: justify;
justify-content: space-between;
}
.workrow .workbox {
position: relative;
}
.workrow .workbox.six {
width: 50%;
}
.workrow .workbox.imgbox:after {
content: '';
display: block;
}
.workrow .workbox.imgbox.workthumb:after {
padding-bottom: 62.5%;
}
.workrow .workbox.imgbox.worktall:after {
padding-bottom: 125%;
}
.workrow .workbox.imgbox .imgbg {
position: absolute;
top: 0.219rem;
bottom: 0.219rem;
left: 0.219rem;
right: 0.219rem;
background-size: cover;
background-repeat: no-repeat;
}
.workbox.textbox {
background-color: rgba(0, 125, 0, 0.2);
}
*, *::after, *::before {
box-sizing: border-box;
}