JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//code.jquery.com/jquery-1.11.1.min.js"></script>
<script src="//cdn.datatables.net/1.10.2/js/jquery.dataTables.min.js"></script>
<script src="//cdn.datatables.net/responsive/1.0.1/js/dataTables.responsive.min.js"></script>
<table id="example" class="display nowrap" cellspacing="0" width="100%">
    <thead>
        <tr>
            <th></th>
            <th>Item 1</th>
            <th>Item 2</th>
            <th>Item 3</th>
            <th>Item 4</th>
        </tr>
    </thead>
    <tbody>
        <tr data-child-value='<intro change="change" id="c1031s14" pf-type="na" target="official"> <para>This chapter provides guidance on the identification and performance of procedures for evaluating the biocompatibility of drug containers, elastomeric closures, medical devices, and implants. Biocompatibility refers to the tendency of these products to remain biologically inert throughout the duration of their contact with the body. The biocompatibility testing procedures referenced in this chapter are designed to detect the nonspecific, biologically reactive, physical or chemical characteristics of medical products or the materials used in their construction. In combination with chemical assays, these biological procedures can be used to detect and identify the inherent or acquired toxicity of medical products prior to or during their manufacturing and processing.</para> <para>Preclinical testing procedures to evaluate the safety of the elastomers, plastics, or other polymers used in the construction of medical products are referenced or described in the following general chapters:<revision cn="1-May-2016" official="yes" pf-type="na" symbols="all"> <add> <xref rid="c1" type="general-chapter">Injections and Implanted Drug Products<chap-num>1</chap-num> </xref> </add> </revision>,<xref rid="c87" type="general-chapter">Biological Reactivity Tests, In Vitro<chap-num>87</chap-num> </xref>,<xref rid="c88" type="general-chapter">Biological Reactivity Tests, In...

CSS

@import url('//cdn.datatables.net/1.10.2/css/jquery.dataTables.css');
 td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_open.png') no-repeat center center;
    cursor: pointer;
}
tr.shown td.details-control {
    background: url('http://www.datatables.net/examples/resources/details_close.png') no-repeat center center;
}

JavaScript

function format(value) {
  		value = value.replace(/</g,"&lt;")
			value = value.replace(/>/g,"&gt;")
			value = value.replace(/"/g,"\"")
      return '<div>Hidden Value: ' + value + '</div>';
  }
  
  $(document).ready(function () {
      var table = $('#example').DataTable({});

      // Add event listener for opening and closing details
      $('#example').on('click', 'td.details-control', function () {
          var tr = $(this).closest('tr');
          var row = table.row(tr);

          if (row.child.isShown()) {
              // This row is already open - close it
              row.child.hide();
              tr.removeClass('shown');
          } else {
              // Open this row
              row.child(format(tr.data('child-value'))).show();
              tr.addClass('shown');
          }
      });
  });