JSFiddle - React, Tailwind, and code Playground

HTML

<div class="items">
    <div class="title-bar">
        phtototooodododo
    </div>
    
    <div class="car-info">
        dfsafdsfafdsfdsfdsfl jds;lfjdls;jkf l;dsjf;ldskjfl;dsajfl;
        dfsafdsfafdsfds fdsfljds;lfjdls;jkf l;dsjf;ldskjfl;dsajfl;
        dfsafdsfafdsfd sfdsfljds;lfjdls;jkf l;dsjf;ldskjfl;dsajfl; 
        dfsafdsfafdsfdsf dsfljds;lfjdls;jk  fl;dsjf;ldskjfl;dsajfl;dfsafdsf
        afdsfdsfdsfljds;lfj dls;jkfl;dsjf;ldskjfl;dsajfl;
    </div>
    
    <div class="photos-wrap">
        photo
    </div>
</div>



<div class="items">
    <div class="title-bar">
        phtototooodododo
    </div>
    <div class="car-info">
        dfsafdsfafdsfdsfdsfl jds;lfjdls;jkf l;dsjf;ldskjfl;dsajfl;
        dfsafdsfafdsfds fdsfljds;lfjdls;jkf l;dsjf;ldskjfl;dsajfl;
        dfsafdsfafdsfd sfdsfljds;lfjdls;jkf l;dsjf;ldskjfl;dsajfl; 
        dfsafdsfafdsfdsf dsfljds;lfjdls;jk  fl;dsjf;ldskjfl;dsajfl;dfsafdsf
        afdsfdsfdsfljds;lfj dls;jkfl;dsjf;ldskjfl;dsajfl;
    </div>
    <div class="photos-wrap">
       photo
    </div>
</div>
<div class="items">
    <div class="title-bar">
        phtototooodododo
    </div>
    <div class="car-info">
        dfsafdsfafdsfdsfdsfl jds;lfjdls;jkf l;dsjf;ldskjfl;dsajfl;
        dfsafdsfafdsfds fdsfljds;lfjdls;jkf l;dsjf;ldskjfl;dsajfl;
        dfsafdsfafdsfd sfdsfljds;lfjdls;jkf l;dsjf;ldskjfl;dsajfl; 
        dfsafdsfafdsfdsf dsfljds;lfjdls;jk  fl;dsjf;ldskjfl;dsajfl;dfsafdsf
        afdsfdsfdsfljds;lfj dls;jkfl;dsjf;ldskjfl;dsajfl;
    </div>
    <div class="photos-wrap">
        photo
    </div>
</div>

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{
    padding:10px;
	position: absolute;
	z-index: 20!important;
	margin-top:-282px;
	text-align: justify;
	transition: all 0.8s ease-in;
    background-color:#fff;
}
.photos-wrap{
    border-bottom:1px solid #ccc;
    height:300px;
}
.car-info.down {
	margin-top:0px !important;
	transition: all 0.5s ease-out;
}

JavaScript

$(".items").on("click", function () {
   
    
    $(this).find('.title-bar').removeClass('down');
    $(this).find('.title-bar').addClass('down');
    $(this).find('.car-info').removeClass('down');
    $(this).find('.car-info').addClass('down');
   //i wanted .title-bar is addClass down
   // .carinfo on mouseover is addClass down
});
//$(".items").on("mouseout", function () {
    
    //i wanted .title-bar is removeClass down
   // carinfo on mouseover is removeClass down
//});