JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<div id="container">
<img class="full" src="http://25wca92087jd22q75z43saw6.wpengine.netdna-cdn.com/wp-content/uploads/2018/01/PulitzerArts_WaterCourt-1-e1515703949436-1630x0-c-default.jpg">
<img class="half" src="http://25wca92087jd22q75z43saw6.wpengine.netdna-cdn.com/wp-content/uploads/2017/01/watson_build.jpg">
<div class="half"> <article>copy here</article> </div>
<div class="half"> <article>copy here</article> </div>
<img class="half" src="http://25wca92087jd22q75z43saw6.wpengine.netdna-cdn.com/wp-content/uploads/2017/01/watson_build.jpg">
</div>

CSS

#container {
  max-width: 600px;
    margin: 0 auto;
    width:80%;
}

article {
  text-align:center;
 position: relative;
top: 50%;
transform: translateY(-50%); 
}

.full {
    display: block;
    width:100vw;
    height:auto;
    float:left;
}

.half {
    display: block;
    margin: auto;
    width: 50vw;
    height: calc((9/16)*50vw);
    float:left;
}

@media (min-aspect-ratio:16/9) {
    .half {
        height: 50vh;
        width: calc((16/9)*50vh);
    }
}