JSFiddle - React, Tailwind, and code Playground

HTML

<body>
    <div id="table">
    <div class='navBar'>
        <div class='pageBar'>
            <div class='pager'>&#9665;</div>
            <div class='pager'>1</div>
            <div class='pager fliph'>&#9665;</div>
        </div>
    </div>
    <div class='results'>
        <div>
        <div class='line'>Line1</div>
        <div class='line'>Line2</div>
        <div class='line'>Line3</div>
        <div class='line'>Line4</div>
        </div>
    </div>
    </div>
</body>

CSS

* {
  font-family: Helvetica, Sans;
  border: 0px;
  margin: 0px;
  padding: 0px;
}

html, body {
    height: 100%;
}

#table { display: table; height: 100%; width: 100%; }

.navBar {
  width: auto;
  overflow: auto;
  border-bottom: 1px solid #bbb;
  display: table-row;
}

.pageBar {
  float: right;
}

.pager {
  cursor: pointer;
  float: left;
  border: 1px solid #bbb;
  width: 2em;
  height: 2em;
  line-height: 2em;
  text-align: center;
  margin: 5px;
  margin-left: 0px;
  background: #eee;
  color: #bbb;
}

.pager:hover {
  background: #777;
  border: 1px solid black;
  color: white;
}

.fliph {
  -ms-transform:scale(-1,1); /* IE 9 */
  -moz-transform:scale(-1,1); /* Firefox */
  -webkit-transform:scale(-1,1); /* Safari and Chrome */
  -o-transform:scale(-1,1); /* Opera */
}

.results {
  background: gray;
  width: 100%;
  height: 100%;
  overflow: auto;
  display: table-row;
}

.results > div { height: 100%; overflow: auto; }

.line {
  height: 10em;
  line-height: 10em;
  border: 1px solid red;
}