JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/ryanve/verge/master/verge.js"></script>

CSS

.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

// First append the HTML to the body

var $width  = $( "<div class='w'></div>" );
var $height = $( "<div class='h'></div>" );

$( "body" ).append( $width, $height);


// Then run the function that gets the Verge values
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');

}


// Call the function of window resize and document ready
$(window).on('resize', getVergeValues);
$(document).ready(getVergeValues);