JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="https://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="https://apis.google.com/js/client.js?onload=googleApiClientReady"></script>
<script src="https://code.highcharts.com/highcharts.js"></script>
<script src="https://code.highcharts.com/modules/exporting.js"></script>
<script src="//d3js.org/d3.v3.min.js"></script>
<script src="http://d3js.org/topojson.v1.min.js"></script>
<script src="https://d3js.org/topojson.v1.min.js"></script>
<script src="https://unpkg.com/topojson@3"></script>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.12.1/themes/smoothness/jquery-ui.css">
<script src="https://code.highcharts.com/highcharts-more.js"></script>
<script src="https://fonts.googleapis.com/css?family=Unica One"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<!DOCTYPE html>

<body>
  <!-- Add all page content inside this div if you want the side nav to push page content to the right (not used if you only want the sidenav to sit on top of the page -->
  <div id="main">

    <div id="bottom_half">
      <br>

      <div id="main_chart_container" style="min-width: 310px; height: 300px; margin: 0 auto"></div>
      <div id="pie_chart" style="min-width: 50px; height: 300px; margin: 0 auto"></div>
    </div>
  </div>
  </div>

</body>

CSS

/* Style page content - use this if you want to push the page content to the right when you open the side navigation */

#main {
  transition: margin-left .5s;
  padding: 20px;
  overflow: hidden;
  position: relative;
  width: 100%;
  height: 100%;
}


/* On smaller screens, where height is less than 450px, change the style of the sidenav (less padding and a smaller font size) */

@media screen and (max-height: 450px) {
  .sidenav {
    padding-top: 15px;
  }
  .sidenav a {
    font-size: 18px;
  }
}

@media (min-width: 600px) {
  .main {
    display: flex;
    width: 100%;
  }
  .legend {
    flex: 1;
    width: 50%;
  }
  .chart {
    flex: 1;
    width: 50%;
  }
}

#bottom_half {
  width: 100%;
  height: 100%;
  position: absolute;
  top: 0;
  overflow: hidden;
  /* contain floated elements */
  background: #2a2a2b;
  display: inline-block;
}

#heatmap {
  width: 50%;
  float: left;
  height: 100%;
  background-color: #2a2a2b;
  border: none !important;
}

#treemap {
  width: 50%;
  float: right;
  height: 100%;
  color: white;
}

#button_container {
  float: left;
  height: 100%;
  color: #353C3E;
}

#main_chart_container {
  width: 70%;
  float: left;
  height: 100%;
  color: #353C3E;
}

#pie_chart {
  width: 30%;
  float: right;
  height: 100%;
  color: #353C3E;
  padding-right: 20px;
}

html,
body {
  height: 100%;
  width: 100%;
  background-color: #2a2a2b;
}

.title {
  font-weight: bold;
  font-size: 24px;
  text-align: center;
  margin-top: 6px;
  margin-bottom: 6px;
}

#treemap text {
  pointer-events: none;
}

.grandparent text {
  font-weight: bold;
}

tree_rect {
  fill: none;
  stroke: #fff;
}

rect.parent,
.grandparent rect {
  stroke-width: 2px;
}

rect.parent {
  pointer-events: none;
}

.grandparent rect {
  fill: #E66A39;
}

.grandparent:hover rect {
  fill: #ee9700;
}

.background {
  fill: #353C3E;
  pointer-events: all;
}

.children rect.parent,
.grandparent rect {
  cursor: pointer;
}

.children rect.parent {
  fill: #bbb;
 ...

JavaScript

$(document).ready(function() {
  // Create the chart

  var options2 = {
    chart: {
      plotBackgroundColor: null,
      plotBorderWidth: null,
      plotShadow: false,
      type: 'pie'
    },
    credits: {
      enabled: false
    },
    title: {
      text: 'Shapes of UFOs'
    },
    tooltip: {
      pointFormat: '{series.name}: <b>{point.percentage:.1f}%</b>'
    },
    legend: {
      enabled: false
    },
    plotOptions: {
      pie: {
        allowPointSelect: true,
        cursor: 'pointer',
        dataLabels: {
          enabled: true
        },
        showInLegend: true
      }
    },
    series: [{
      "colorByPoint": "true",
      "data": [{
        "y": 498,
        "name": "Triangle"
      }, {
        "y": 430,
        "name": "Fireball"
      }, {
        "y": 199,
        "name": "Formation"
      }, {
        "y": 1118,
        "name": "Light"
      }, {
        "y": 678,
        "sliced": "true",
        "name": "Circle"
      }, {
        "y": 68,
        "name": "Chevron"
      }, {
        "y": 31,
        "name": "Egg"
      }, {
        "y": 64,
        "name": "Diamond"
      }, {
        "y": 72,
        "name": "Cylinder"
      }, {
        "y": 210,
        "name": "Disk"
      }, {
        "y": 120,
        "name": "Changing"
      }],
      "name": "Share"
    }]
  };

  options2.chart.renderTo = 'pie_chart';
  options2.chart.type = 'pie';
  var chart2 = new Highcharts.Chart(options2);


  var options = {
    chart: {
      polar: false,
      plotBorderWidth: 0
    },
    title: {
      text: 'Daily UFO Sightings',
    },
    credits: {
      enabled: false
    },
    size: '100%',
    pane: {
      size: '100%'
    },
    subtitle: {
      text: 'Year of 2016'
    },
    xAxis: {
      type: 'category',
      title: {
        margin: 10,
        text: 'Days of the Year'
      }
    },
    yAxis: {
      title: {
        margin: 10,
        text: 'No. of Sightings'
      },
      gridLineInterpolation: '',
     ...