JSFiddle - React, Tailwind, and code Playground

by Anton_Diaz

HTML

<div id="container" class="float-left">
<div id="controls"><span contenteditable>show</span>:<button onclick="filter(0)">all</button><button onclick="filter(30)">30+</button></div>
  <div id="side"></div>
  <div id="scroller">
    <table id="food">
      <tr>
        <td class="name">Apple</td>
        <td class="quan">7</td>
      </tr>
      <tr>
        <td class="name">Orange</td>
        <td class="quan">12</td>
      </tr>
      <tr>
        <td class="name">Mango</td>
        <td class="quan">3</td>
      </tr>
      <tr>
        <td class="name">Banana</td>
        <td class="quan">26</td>
      </tr>
      <tr>
        <td class="name">Kiwi</td>
        <td class="quan">36</td>
      </tr>
      <tr>
        <td class="name">Pear</td>
        <td class="quan">8</td>
      </tr>
      <tr>
        <td class="name">Avocado</td>
        <td class="quan">17</td>
      </tr>
      <tr>
        <td class="name">Tomato</td>
        <td class="quan">28</td>
      </tr>
      <tr>
        <td class="name">Cucumber</td>
        <td class="quan">3</td>
      </tr>
      <tr>
        <td class="name">Carrot</td>
        <td class="quan">14</td>
      </tr>
      <tr>
        <td class="name">Mandarin</td>
        <td class="quan">19</td>
      </tr>
      <tr>
        <td class="name">Potato</td>
        <td class="quan">6</td>
      </tr>
      <tr>
        <td class="name">Grape</td>
        <td class="quan">31</td>
      </tr>
      <tr>
        <td class="name">Strawberry</td>
        <td class="quan">12</td>
      </tr>
      <tr>
        <td class="name">Blueberry</td>
        <td class="quan">15</td>
      </tr>
      <tr>
        <td class="name">Blackberry</td>
        <td class="quan">13</td>
      </tr>
      <tr>
        <td class="name">Pinapple</td>
        <td class="quan">25</td>
      </tr>
      <tr>
        <td class="name">Turnip</td>
        <td class="quan">4</td>
      </tr>
      <tr>
        <td class="name">Currant</td>
        <td...

CSS

BODY {
  font-family: sans-serif;
  font-size: 14px;
  }
#container {
  background-color: #ffffc0;
  border: 1px solid #0000ff;
  padding: 0 10px 0 0;
  }
  .float-left {
    float: left;
    margin: 0 5px 5px 0;
    position: relative;
    }
  .float-right {
    float: right;
    margin: 0 0 5px 5px;
    position: relative;
    }
  .absolute-right {
    position: absolute;
      top: 0;
      right: 0;
    }
  .inline-block {
    position: relative; /* needed for #toogle positiong */
    display: inline-block;
    }
#side {
  background: #ff0000;
  height: 100%;
  width: 5px;
  position: absolute;
    top: 0;
    right: 0;
  }
#controls {
  text-align: right;
  }
#scroller {
  margin: 0 0 0 auto;
  max-height: 200px;
  overflow-y: auto;
  }
#food {
  margin: 0 0 0 auto;
  text-align: right;
  }
.name {
  padding-right: 5px;
  }
P {
  margin: 5px 0;
  padding: 0;
  line-height: 1.5;
  }

JavaScript

function filter(minQuanity) {
	var quanElements = document.getElementsByClassName('quan');
	for (var i = 0; i < quanElements.length; i++) {
		if (+quanElements[i].textContent < minQuanity) {
			quanElements[i].parentNode.style.display = 'none';
			} else {
			quanElements[i].parentNode.style.display = '';
			}
  	}
  }

function heightSwap() {
  var toggleElement = document.getElementById('side');
	toggleElement.style.height = '0';
  toggleElement.style.height = '';
  }

function reflow1() {
  var toggleElement = document.getElementById('side');
	toggleElement.style.height = '0';
  toggleElement.offsetHeight;
  toggleElement.style.height = '';
  }

function reflow2() {
  var toggleElement = document.getElementById('side');
	toggleElement.style.height = '0';
	setTimeout(function() {
    toggleElement.style.height = '';
    }, 4)
  }

function setClass(posClass) {
	document.getElementById('container').className = posClass;
  }