JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
    <div class="title-bar">
        <b>Lamborghini</b>
    </div>
    <div class="car-info" onmouseover="isOvered=true;" onMouseout="isOvered=false;">
        lamborghini is Best in Its class I Like it!!!!!<br />
        lamborghini is Best in Its class I Like it!!!!!<br />
        lamborghini is Best in Its class I Like it!!!!!<br />
        lamborghini is Best in Its class I Like it!!!!!<br />
        lamborghini is Best in Its class I Like it!!!!!<br />
        lamborghini is Best in Its class I Like it!!!!!<br />
        lamborghini is Best in Its class I Like it!!!!!<br />
        lamborghini is Best in Its class I Like it!!!!!<br />
        lamborghini is Best in Its class I Like it!!!!!<br />
        lamborghini is Best in Its class I Like it!!!!!<br />
        lamborghini is Best in Its class I Like it!!!!!<br />
        lamborghini is Best in Its class I Like it!!!!!<br />
         lamborghini is Best in Its class I Like it!!!!!<br />
        lamborghini is Best in Its class I Like it!!!!!<br />
       
        
        
    </div>
    <div class="photos-wrap">
        <img src="http://static.hdw.eweb4.com/media/wp_400/1/1/3292.jpg" width="100%" height="100%" />
    </div>
</div>

<div class="items">
    <div class="title-bar">
        <b>Rolls Royce</b>
    </div>
    <div class="car-info" onmouseover="isOvered=true;" onMouseout="isOvered=false;">
        Rolls is Best!!<br />
        Rolls is Best!!<br />
        Rolls is Best!!<br />
       Rolls is Best!!<br />
        Rolls is Best!!<br />
        Rolls is Best!!<br />
       Rolls is Best!!<br />
        Rolls is Best!!<br />
        Rolls is Best!!<br />
       Rolls is Best!!<br />
        Rolls is Best!!<br />
        Rolls is Best!!<br />
       Rolls is Best!!<br />
        Rolls is Best!!<br />
        Rolls is Best!!<br />
             
    </div>
    <div class="photos-wrap">
        <img...

CSS

.items{
    border: 1px solid #ccc;
	float: left;
	height: 420px;
	margin-bottom: 20px;
	margin-right: 11px;
	overflow: hidden;
	position: relative;
	width: 284px;
    background-color:#f0f0f0;
}
.title-bar{
    border-bottom: 1px solid #ccc;
    cursor: pointer;
    position: relative;
    padding:20px;
}
.car-info{
    background-color: rgba(255,255,255,0.5);
    border: 1px solid #ccc;
    padding: 15px 10px;
    text-align: justify;
    display: none;
    position:relative;
    z-index:10;    
    height:270px;
    overflow:auto;
    clear:both;
}
.photos-wrap{
    border-bottom:1px solid #ccc;
    height:300px;
    position:absolute;
    top:62px;
    left:0px;
    z-index:5;
    display:inline-block;
}

JavaScript

$(".items .title-bar").on("mouseover", function (e) {
    $(this).closest(".items").find(".car-info").slideDown(); 
    e.stopPropagation();
});
$(document).on("mouseover",function(e){
$(".car-info").slideUp();
});
$(".car-info").on("mouseover",function(e){
e.stopPropagation();
});
/* by vedant Terkar*/