JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/ryanve/verge/master/verge.js"></script>
<div id="notification">
  <div class="w"></div>
  <div class="h"></div>
</div>

CSS

#notification{
  text-align:center;
}

.w{
  float:left;
  width:50%;
  height: 1.2em;
  font-size:2rem;
  background: silver;
}

.h{
  float:right;
  width:50%;
  height: 1.2em;
  font-size:2rem;
  background: gold;
}

* {
    -moz-box-sizing: border-box;
    -webkit-box-sizing: border-box;
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

*, *:before, *:after {
  box-sizing: inherit;
}

JavaScript

function getVergeValues() {

viewportWidth  = verge.viewportW() // Get the viewport width in pixels.
viewportHeight = verge.viewportH() // Get the viewport height in pixels.

$('.w').text(viewportWidth  + 'px wide');
$('.h').text(viewportHeight + 'px high');

}

$(window).on('resize', getVergeValues);
$(document).ready(getVergeValues);