JSFiddle - React, Tailwind, and code Playground

by James

HTML

<link rel="stylesheet" href="//cdnjs.cloudflare.com/ajax/libs/normalize/3.0.1/normalize.css">
<script src="//cdnjs.cloudflare.com/ajax/libs/modernizr/2.8.2/modernizr.min.js"></script>
<div class="page-content">
    <div class="gmap">
        <div id="map"></div>		
    </div>
    <div class="right-wrapper">this is the right side</div>
</div>

CSS

html, body {
  /*Inder OR Imprima is also a good one*/
	font-family: "Telex", "Helvetica Neue", "Helvetica", Helvetica, Arial, sans-serif;
	font-size: 100%;
	height: 100%;
}

body {
  color: #222222;
  padding: 0;
  margin: 0;
  font-weight: normal;
  font-style: normal;
  line-height: 1;
  position: relative;
  cursor: default;
  /*-webkit-text-stroke: 0.2px;*/
}

.gmap {
  -webkit-box-sizing: content-box;
  -moz-box-sizing: content-box;
  box-sizing: content-box;
}

.gmap {
    /*position: relative;
    float: left;*/
    width: 45%;/*this is the issue!*/
    height: 100%;
    margin: 0;
    padding: 0;
}

#map {
    width: 100%;
    height: 100%;
}

.page-content {
    padding-left: 170px;
    height: 100%;
}

.right-wrapper {
    overflow: auto !important;
    float: left;
    padding: 10px;
    width: 55%;
    height: 100%;
}