JSFiddle - React, Tailwind, and code Playground

HTML

<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/foundation/6.2.3/foundation.min.css">
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<div class="product-submenu-container">
  <div class="row collapse">
    <div class="medium-3 columns">
      <h3>products</h3>
      <ul class="submenu-list">
        <li><a href="#!" targetDiv="showme1">KB1</a></li>
        <li><a href="#!" targetDiv="showme2">KB2</a></li>
        <li><a href="#!" targetDiv="showme3">KB3</a></li>
        <li><a href="#!" targetDiv="showme4">REED</a></li>
      </ul>
    </div>
    <div class="medium-9 columns">
      <div id="placehold" class="product-banner placehold">
        <h3>This is some placeholder text</h3>
        <p>This is some placeholder text, it should sit next to the list and 
        should be visible when nothing else is hovered.</p>
      </div>
      <div id="showme1" class="product-banner showme1">
        <div class="row">
          <div class="large-8 columns">
            <h3>KB1</h3>
            <p><em>Some placeholder text</em></p>
            <p>Vivamus sagittis lacus vel augue laoreet rutrum faucibu
            s dolor auctor. Praesent commodo cursus magna, vel scelerisque nisl consectetur et.</p>
          </div>
          <div class="large-4 columns">
            <img src="http://placehold.it/200" />
          </div>
        </div>
      </div>
      <div id="showme2" class="product-banner showme2">
        <h3>KB2</h3>
      </div>
      <div id="showme3" class="product-banner showme3">
        <h3>KB3</h3>
      </div>
      <div id="showme4" class="product-banner showme4">
        <h3>REED</h3>
      </div>
    </div>
  </div>
</div>

CSS

.showme1, .showme2, .showme3, .showme4 {
  display: none;
}

JavaScript

$(document).ready(function () {
var currentTargetDivId;
  $("a[targetDiv*='showme']").hover(
  function(){
    currentTargetDivId = "#"+$(this).attr("targetDiv");
    $("#placehold").hide();
    $(currentTargetDivId).show();
  },
  function(){
    currentTargetDivId = "#"+$(this).attr("targetDiv");
    $("#placehold").show();
    $(currentTargetDivId).hide();
  }
  );
});