JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://rawgit.com/Soldier-B/micromark.js/master/micromark.min.js"></script>
<script type="text/plain" src="http://loripsum.net/api/10/long/headers"></script>
<div class="container">
  <div class="left">
    <input type="search" placeholder="Search" />
    <div class="result-container">
      <ul class="results"></ul>
    </div>
  </div>
  <div class="right">
    <h1>Partim cursu et peragratione laetantur, congregatione aliae coetum quodam modo civitatis imitantur;</h1>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Ille vero, si insipiens-quo certe, quoniam tyrannus -, numquam beatus; Nec vero sum nescius esse utilitatem in historia, non modo voluptatem. Vides igitur, si amicitiam sua caritate metiare,
      nihil esse praestantius, sin emolumento, summas familiaritates praediorum fructuosorum mercede superari. Nec enim ignoras his istud honestum non summum modo, sed etiam, ut tu vis, solum bonum videri. Hoc uno captus Erillus scientiam summum bonum
      esse defendit nec rem ullam aliam per se expetendam. Ita graviter et severe voluptatem secrevit a bono. Vos autem cum perspicuis dubia debeatis illustrare, dubiis perspicua conamini tollere. Duo Reges: constructio interrete. Et quoniam haec deducuntur
      de corpore quid est cur non recte pulchritudo etiam ipsa propter se expetenda ducatur? Hoc est non dividere, sed frangere. Hoc simile tandem est? Sed haec ab Antiocho, familiari nostro, dicuntur multo melius et fortius, quam a Stasea dicebantur.
    </p>
    <h2>Consequatur summas voluptates non modo parvo, sed per me nihilo, si potest;</h2>
    <p>Quid enim de amicitia statueris utilitatis causa expetenda vides. Quid turpius quam sapientis vitam ex insipientium sermone pendere? Quicquid porro animo cernimus, id omne oritur a sensibus; Nam et ille apud Trabeam voluptatem animi nimiam laetitiam
      dicit eandem, quam ille Caecilianus, qui omnibus laetitiis laetum esse se narrat. Negat esse eam, inquit, propter se expetendam....

CSS

* {
  box-sizing: border-box;
}

html,
body {
  margin: 0;
  padding: 0;
  height: 100%;
  font: 10pt/1.5 monospace;
}

.container {
  display: flex;
  padding: 15px;
  width: 100%;
  height: 100%;
}

.container > div {
  height: 100%;
}

.left {
  max-width: 300px;
  display: flex;
  flex-direction: column;
}

.right {
  margin-left: 15px;
  flex: 1;
  overflow-y: auto;
  position: relative;
}

.result-container {
  overflow-y: auto;
  height: 100%;
  margin-top: 15px;
}

.results {
  margin: 0;
  padding: 0;
  list-style: none;
}

.results:empty {
  display: none;
}

p {
  margin: 0;
}

p + p {
  margin-top: 15px;
}

mark {
  padding: 2px;
  margin: -2px;
  border-radius: 2px;
}

mark.hover,
mark:hover {
  background-color: #09d;
  color: #fff;
}

JavaScript

var input = document.querySelector('input'),
  results = document.querySelector('.results'),
  root = document.querySelector('.right');

input.addEventListener('input', function() {
  Mark(root); // unmark
  clearResults();

  if (this.value) {
    var marks = Mark(root, this.value, {
      mode: Mark.INCLUSIVE_MATCH
    });

    if (marks.length) {
      marks.forEach(function(mark, i) {
        var li = document.createElement('li'),
          a = document.createElement('a');

        a.appendChild(document.createTextNode(mark.textContent));
        a.href = '#';
        a.onclick = function(e) {
          e.preventDefault();
          root.scrollTop = mark.offsetTop;
        };
        a.onmouseover = function(e) {
          mark.classList.add('hover');
        };
        a.onmouseout = function(e) {
          mark.classList.remove('hover');
        };
        li.appendChild(document.createTextNode(++i + ': '));
        li.appendChild(a);
        results.appendChild(li);
      });
    } else {
      // no results
    }
  }
});

function clearResults() {
  while (results.firstChild)
    results.removeChild(results.firstChild);
}