JSFiddle - React, Tailwind, and code Playground

HTML

<div class='container-box'>
    <div class='box-header'>
        <p class='p'>Heading</p>
    </div>
    <div class="box-body">

      <div class="image-container inner-body-container">
          <img src="#" alt="#" class='img'/>
          <img src="#" alt="#" class='img'/>
      </div>
    
      <div class="text-container inner-body-container">
        <p class='p'>Lorem ipsum dolor sit amet</p>
      </div>
    
    </div>
    
    
</div>

CSS

.container-box {
    width: 95%;
    margin: 0 auto;
}
.box-header {
    float: left;
    width: 100%;
    text-align: center;
    border: 2px solid rgb(183,57,118);
    background: rgb(183,57,118);
}
.box-body {
    float: left;
    width: 100%;
    border: 2px solid rgb(183,57,118);
}
.inner-body-container {
    float: left;
    width: 40%;
}
.text-container {
    margin: 0 0 0 20px;
}
.img {
    float: left;
    clear: both;
    width: 100%;
}
.p {
    margin: 0;
    padding: 20px 0;
}

JavaScript

$(document).ready(function(){
$(".box-header").click(function(){
$(".box-body").slideToggle("slow");
});
});