JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="content" id="1">1</div>
  <div class="content" id="2">2</div>
  <div class="content" id="3">3</div>
  <div class="content" id="4">4</div>
  <div class="content" id="5">5</div>
  <div class="content" id="6">6</div>
  <div class="content" id="7">7</div>
  <div class="content" id="8">8</div>
  <div class="content" id="9">9</div>


  <div class="readmore" id="q1">1</div>
  <div class="readmore" id="q2">2</div>
  <div class="readmore" id="q3">3</div>
  <div class="readmore" id="q4">4</div>
  <div class="readmore" id="q5">5</div>
  <div class="readmore" id="q6">6</div>
  <div class="readmore" id="q7">7</div>
  <div class="readmore" id="q8">8</div>
  <div class="readmore" id="q9">9</div>


</div>

CSS

.container {
  width: 1200px;
}

.content {
  width: 100px;
  height: 100px;
  display: inline-block;
  margin: 10px;
  background-color: red;
}

.readmore {
  display: inline-block;
  margin: 10px;
  width: 100px;
  height: 50px;
  background-color: green;
}

JavaScript

$(document).ready(function(){

			
			$('.content').hover(function(){
				$(this).hover(function() {
					$('.readmore').slideUp(400)
				}, function() {
					$('.readmore').slideDown(400)
				});
			});
		})