JSFiddle - React, Tailwind, and code Playground

HTML

<!doctype html>
<html lang="en">
<head>
  <meta charset="utf-8">
  <title>jQuery demo</title>
  <script src="jquery.js"></script>
  <script src="index.js"></script>
  <link rel="stylesheet" href="style.css">
</head>
<body>
	<div id="wrapper">
	
	  <section>
		<header>
			<h3>App 1<h3>
		</header>
		<div class="box">
		</div>
	  </section>
	  <div class="box-content">
		<p> This is content 1 </p>
	  </div>
	  
	  <section>
		<header>
			<h3>App 2<h3>
		</header>
		<div class="box">
		</div>
	  </section>
	  <div class="box-content">
			<p> This is content 2 </p>
	  </div>
	  
	  <section>
		<header>
			<h3>App 3<h3>
		</header>
		<div class="box">
		</div>
	  </section>
	  <div class="box-content">
		<p> This is content 3 </p>
	  </div>
	  
	</div>

</body>
</html>

CSS

#wrapper {
	position: absolute;
	display: table;
	left: 80px;
  right: 50px;
  top: 30px;
	width: 100%;
	max-width: 900px;
	border: 2px solid red;
	border-spacing: 10px;
}

#wrapper > header {
	top: 5px; 
	width: 100%;
}

#wrapper header h3 {
	text-align: center;
}
 
#wrapper section { 
	display: table-cell; 
	border: 2px solid black;
}

#wrapper section:hover {
	background-color: #bbb;
	width: 750px;
}

.box-content {
	display: none;
	background-color: #bbb;
	width: 750px;
	height: 100%;
	min-height: 400px;
}

JavaScript

$(document).ready(function () {
	$("#wrapper section").hover( 
    function() {
		$(this).next('.box-content').slideToggle(500);
		}
  );
});