JSFiddle - React, Tailwind, and code Playground

HTML

<ul>
  <li><b>No Print</b>..Don't print anything before the following search box</li>
  <li><b>No Print</b>..No headers, graphics, Ads or anything else before the search box and its results</li>
</ul>
<div id="print">
  <div id="screen">
    <form class="printForm">
      <div id="printReady">
        <div class="autocompleter">
          <label> When you see a </label>
          <input type=search placeholder="&#x1f50d; Search Box Type here, Then Click Print!" name="tryit" data-using="tryit">
          <p class="content">&nbsp;</p>
        </div>
      </div>

    </form>
  </div>
</div>
<input type="button" onClick="window.print();" value="Print this Recipe">

<script>
  autocompleter.tryit = [{
    value: "Print this display too!",
    label: "Type then Select...,",
    desc: "<ol> <h3>When you clicked print, how can I:</h3> <li> keep this for print, and eliminate everything else on the page?</li> <li>Make it so others can print this out like a food recipe -- i.e. Just ingredients, Directions</li> <li> Lastly, I need the print job to keep the selected text (results of the search) which says --Print this display too!--</li></ol>",
  }];

</script>
<ul>

  <li><b>No Print</b>..Don't print anything After the search box and its results</li>
  <li><b>No Print</b>..No footers, graphics, Ads or anything else After the search box and its results</li>
</ul>

CSS

<style>
        @media screen {
          #screen {
            display: none;
          }
        }
        @media print {
          #print {
            display: block;
            margin-top: 0px;
          }
          .ui-autocomplete-input {
            width: 300x;
          }
          .autocomplete-project label {
            display: block;
            font-weight: bold;
            font-family: Verdana, Arial, sans-serif;
            font-size: 14px;
            margin-bottom: 1em;
          }
          .autocomplete-project .description {
            margin: 0;
            padding: 0;
          }
          .ui-autocomplete-input {
            width: 200px;
            max-height: 200px;
          }
          .autocomplete-project p,
          .autocomplete-project label {
            display: inline
          }
          .ui-autocomplete {
            max-height: 250px;
            overflow-y: auto;
            /* prevent horizontal scrollbar */
            overflow-x: hidden;
            /* add padding to account for vertical scrollbar */
            padding-right: 20px;
          }
          .autocompleter p,
          .autocompleter label {
            display: inline
          }
        }
        
        </style> <!-- required in the head,
        only once for all class=autocompleter--> <link rel="stylesheet" href="https://code.jquery.com/ui/1.12.1/themes/base/jquery-ui.css"> <script src="https://code.jquery.com/jquery-1.12.4.js"></script> <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script> <script> var autocompleter= {}
        
        ;
        $(function() {
          $(document).on("click", ".ui-menu-item-wrapper a[target]", function() {
            return false
          }
          ) $(".autocompleter").each(function() {
            var input=$("input", this);
            var ac=autocompleter[ input.data("using")];
            if (!ac) throw "autocompleter using '"+input.data("using")+"' is not defined"...