JSFiddle - React, Tailwind, and code Playground

HTML

<body>
<div class="Grid Grid--top">
  <div class="Grid-cell Grid-cell--center Grid-cell--image">
     <div id="productImages">
       <img id="productImage0" class="productImages" src="http://placehold.it/450x1550"/>
     </div>
  </div>
 <div class="Grid-cell Grid-cell--center u-1of3">
   2. Section
 </div>
</div>
</body>

CSS

html {
     height: 100%;
  }

body {
     width: 100%;
     height: 100%;
     margin: 0px;
     padding: 0px;
     overflow: hidden;
  }

.Grid {
     display: -webkit-box;
     /* OLD - iOS 6-, Safari 3.1-6 */
     display: -moz-box;
     /* OLD - Firefox 19- (buggy but mostly works) */
     display: -ms-flexbox;
     /* TWEENER - IE 10 */
     display: -webkit-flex;
     /* NEW - Chrome */
     display: flex;
     align-items: center;
     justify-content: center;
     flex-direction: row;
  }

  .Grid-cell {
     flex: 1;
     -webkit-flex: 1;
     -moz-box-flex: 1;
     -ms-flexbox: 1;
     -moz-box: 1;
  }

  .Grid--top {
     align-items: flex-start;
     height: 90%;
  }

  .Grid-cell--center {
     align-self: center;
  }

  .Grid-cell--image {
     text-align: center;
     max-height: 100%;
  }

  .u-1of3,
  .u-2of3 {
     -webkit-flex: 0;
     -moz-box-flex: 0;
     flex: 0 0 auto;
  }

  .u-1of3 {
     width: 35%;
  }

  .productImages {
     height:80%;
  }