JSFiddle - React, Tailwind, and code Playground

by bmarsh123

HTML

<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js"></script>
<nav id="navHeader" class="navbar navbar-expand-md fixed-top">
  <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarCollapse" aria-controls="navbarCollapse" aria-expanded="false" aria-label="Toggle navigation">
    <span class="navbar-toggler-icon"></span>
  </button>
  <div class="collapse navbar-collapse" id="navbarCollapse">
    <div class="container-fluid">
      <div class="row justify-content-center">
        <div class="col-sm-3">
          <select id="lstLocationGroup" class="form-control" name="option">
            <option value="0">Select a Location Group</option>
          </select>
        </div>
        <div class="col-sm-3">
          <select id="lstLocations" class="form-control" name="option">
            <option value="0">Select a Location</option>
          </select>
        </div>
        <div class="col-sm-1">
          <button id="btnSearch" type="button" class="btn btn-primary">Search</button>
        </div>
      </div>
    </div>
  </div>
</nav>
<main role="main" id="divMain" class="container-fluid">
  <div class="row">
    <div class="col-sm-3 overflow-auto pr-0">
      <div class="row mr-0">
        <div class="col-sm-12 pr-0">
          <table class="table table-bordered table-hover mb-0">
            <tbody>
              <tr>
                <td class="gender_M">
                  <div class="row">
                    <div class="col-sm-7">
                      <b>ZZTEST, BRIAN</b>
                    </div>
                    <div class="col-sm-3 offset-sm-2">
                      <span>30 Years/M</span>
                    </div>
                  </div>
                  <div class="row">
                    <div class="col-md-6">
                      <span>MRN: 123456789</span>
                 ...

CSS

html,
body {
  margin: 0px;
  overflow-y: hidden;
  padding-top: 40px;
}

.fixed-top {
  background: #fff;
  border-bottom: 1px solid #ddd;
}

#divMain>.row>div {
  height: calc(100vh - 80px);
  min-height: calc(100vh - 80px);
  max-height: calc(100vh - 80px);
  overflow-x: hidden !important;
}

.gender_F {
  background: #f5c6cb;
}

.gender_M {
  background: #b8daff;
}

span {
  font-size: .75rem;
}

tr {
  cursor: default;
}

.accordion {
  background-color: #eee;
  color: #444;
  cursor: pointer;
  padding: 10px;
  width: 100%;
  text-align: left;
  border: none;
  outline: none;
  transition: 0.4s;
  border-bottom: 1px solid #ccc;
  border-radius: .25rem;
  margin-bottom: 2px;
}

.accordion:last-of-type {
  margin-bottom: 0px;
}

.active,
.accordion:hover {
  background-color: #ccc;
}

.accordion:before {
  content: '\02795';
  font-size: 10px;
  color: #777;
  float: left;
  margin-left: 5px;
  margin-right: 5px;
  margin-top: 5px;
}

.active:before {
  content: '\2796';
}

.panel {
  background-color: white;
  margin-top: -2px;
  margin-bottom: 2px;
  display: none;
  overflow: hidden;
  transition: max-height 0.2s ease-out;
}

.room {
  padding: 0 10px;
  display: inline-block;
  border: 1px solid #ccc;
  border-radius: .25rem;
  width: 200px;
  max-width: 200px;
  height: 75px;
  max-height: 75px;
  margin-top: 2px;
}

JavaScript

var widthWithoutScrollbar = document.body.clientWidth;
var heightWithoutScrollbar = document.body.clientHeight;

//alert('viewport width is: '+ widthWithoutScrollbar + ' and viewport height is: ' + heightWithoutScrollbar);

$('.accordion').click(function(event) {
  var panel = $(this).next('.panel');
  $(this).toggleClass('active');

  if (!panel.hasClass('active')) {
    panel.toggle();
  }
});

var rooms;

for (var x = 1; x < 10; x++) {
	rooms += '<div class="room"><p>Room ' + x + '</p></div>';
}

$('.panel:nth-of-type(2)').append(rooms);