JSFiddle - React, Tailwind, and code Playground

HTML

<div class="accordion2">
    
    <h3>
        <div class="box"><img src='http://img.youtube.com/vi/tPgf_btTFlc'>
        </div>
    </h3>
    <div>text text text text text text text text</div>
    
    <h3>title</h3>
    <div>text text text text text text text text</div>
    
    <h3>title</h3>
    <div>text text text text text text text text</div>
    
  
        
</div>
<br />
How can I make a div within the < h3 > < /h3 > area without breaking the accordion? Thanks

CSS

body {
    margin: 10px auto;
    width: 570px;
    font: 75%/120% Arial, Helvetica, sans-serif;
}

.box {
  display:inline-block;
  padding: 3px;
  margin: 3px auto;
}

.accordion2 {
     min-height:95px;
     height:auto !important;
     height:95px;

}

.accordion2 h3 {
    padding-bottom: 1px;
    margin: 0;
    border-bottom: none;
    cursor: pointer;
    min-height:95px;
    height:auto !important;
    border:1px solid blue;
}
.accordion2 h3:hover {
    background-color: #e3e2e2;
}
.accordion2 h3.active {
    background-position: right 5px;
}
.accordion2 div {
/*    background: red;
*/    margin: 0;
    display: none;
}

JavaScript

$(document).ready(function(){
    	$(".accordion2 h3").eq(40).addClass("active");
    	$(".accordion2 p").eq(40).show();
    	$(".accordion2 h3").click(function(){
        var video = $(".accordion2 h3.active").next().children();
        var src = video.attr("src");
        video.attr("src","");
        video.attr("src",src);
        
        $(this).next("div").slideToggle("slow")
        .siblings("div:visible").slideUp("slow");
        $(this).toggleClass("active");
        $(this).siblings("h3").removeClass("active");
    });
});