JSFiddle - React, Tailwind, and code Playground

by Ken Watanabe

HTML

<body>
<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>“It looked pretty and pagan at the same time, like a page from a Martha Stewart lifestyle magazine for witches.” — The New York Times Magazine</article> </div>
<img class="half" src="http://25wca92087jd22q75z43saw6.wpengine.netdna-cdn.com/wp-content/uploads/2017/01/watson_movement.gif">
<img class="full" src="http://25wca92087jd22q75z43saw6.wpengine.netdna-cdn.com/wp-content/uploads/2018/01/PulitzerArts_WaterCourt-1-e1515703949436-1630x0-c-default.jpg">
</div>
</body>

CSS

body {
  background:white;
  font-size:10px;
  width:100%;
  height:100%;
  font-family:helvetica;
}

#container {
  position:relative;
  margin: 0 auto;
  display:block;
  width:90vw;
   
}

article {
  text-align:center;
 position: relative;
top: 50%;
transform: translateY(-50%);
padding:30px;
font-size: calc(100% + 1vw);
}

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

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

@media screen and (max-width: 500px) { .half { width:90vw; height:calc((9/16)*90vw);} }

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