JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div style="margin-bottom: 10px">
<input id="findtext" /><button id="find">find</button>
<ul id="foundlist">
</ul>
</div>

<div id="container">
<div class="content" id="content">


<!-- MOBY DICK, CHAPTER 1, LOOMINGS -->

    <p>
      <a name="link2HCH0001" id="link2HCH0001">
      <!--  H2 anchor --> </a>
    </p>
    <div style="height: 4em;">
      <br /><br /><br /><br />
    </div>
    <h2>
      CHAPTER 1. Loomings.
    </h2>
    <p>
      Call me Ishmael. Some years ago&mdash;never mind how long precisely&mdash;having
      little or no money in my purse, and nothing particular to interest me on
      shore, I thought I would sail about a little and see the watery part of
      the world. It is a way I have of driving off the spleen and regulating the
      circulation. Whenever I find myself growing grim about the mouth; whenever
      it is a damp, drizzly November in my soul; whenever I find myself
      involuntarily pausing before coffin warehouses, and bringing up the rear
      of every funeral I meet; and especially whenever my hypos get such an
      upper hand of me, that it requires a strong moral principle to prevent me
      from deliberately stepping into the street, and methodically knocking
      people's hats off&mdash;then, I account it high time to get to sea as soon
      as I can. This is my substitute for pistol and ball. With a philosophical
      flourish Cato throws himself upon his sword; I quietly take to the ship.
      There is nothing surprising in this. If they but knew it, almost all men
      in their degree, some time or other, cherish very nearly the same feelings
      towards the ocean with me.
    </p>
    <p>
      There now is your insular city of the Manhattoes, belted round by wharves
      as Indian isles by coral reefs&mdash;commerce surrounds it with her surf.
      Right and left, the streets take you waterward. Its...

CSS

#container {
  background-color: #EEE;
  overflow: hidden;
  width: 240px;
}
#content {
  position: relative;
  height: 30em;
  margin: 0;
  padding: 0;

  -moz-column-width: 240px;
  -webkit-column-width: 240px;
  column-width: 240px;

  -moz-column-gap: 10px;
  -webkit-column-gap: 10px;
  column-gap: 10px;
}

JavaScript

var _column = 0;
var _columnCount = 0;
var _columnWidth = 240;
var _columnGap = 10;
$(function() {
  _columnCount = Math.floor($('#endMarker').position().left/(_columnWidth + _columnGap));
  //console.log('There are ' + _columnCount + ' columns');

  setColumn = function(i) {
    _column = i;
    document.getElementById('content').style.left = -1 * _column * (_columnWidth + _columnGap) + 'px';
    $('#page').html('Page ' + (_column+1) + ' of ' + (_columnCount+1));
  }
  $('#next').click(function() {
    if (_column==_columnCount) return;
    _column++;
    setColumn(_column);
  });
  $('#previous').click(function() {
    if (0==_column) return;
    _column--;
    setColumn(_column);
  });
  setColumn(0);

  var hilitetext = null;  
  $('#find').click( () => {
    var text = $('#findtext').val();
    var columns = [];

    document.designMode = "on";

    /// remove previous hilite
    if (hilitetext) {
      while (window.find(hilitetext, false)) {
        document.execCommand("RemoveFormat", false, null);
      }
      var sel = window.getSelection();
      /// remove selection
      if (sel) {
        if (sel.empty) sel.empty();   // Chrome
        else sel.removeAllRanges();   // IE
      }
    }
    hilitetext = text;

    /// insert hilite
    var first = true;
    var doms = [];
    var sel;
    while (window.find(text, false)) {
      document.execCommand("HiliteColor", false, 'yellow');
      sel = window.getSelection();
      if (sel) {
        if (first) { first = false; continue; }
        var range = sel.getRangeAt(0);
        
        var el = document.createElement("span");
        var frag = document.createDocumentFragment();
        frag.appendChild(el);
        range.insertNode(frag);
        
        columns.push(Math.floor(el.offsetLeft/(_columnWidth + _columnGap)));
        doms.push(el);
      }
    }
    /// remove selection
    if (sel.empty) sel.empty();   // Chrome
    else sel.removeAllRanges();   // IE
    document.designMode = "off";

...