JSFiddle - React, Tailwind, and code Playground

HTML

<header id="header" class="header">
         <div class="container-header">
         
            <div id='sliders-womens-left'>
              ..........
              ..........
              ..........
            </div>
            
              <button class="spoiler-title"></button>
              
              <div class="spoiler-body">
                .........
              </div>
              
         </div>  
       </header>

CSS

/* Левый слайдер в Хедере */
#sliders-womens-left {
  float: left;
}

  /* переключатель открытия Блока */
button.spoiler-title:after {
  position: absolute;
  content: "\f204";
  font-family: FontAwesome;
  font-weight: bold;
  font-size: 100%;
  top: 3%;
  right: 2%;
  color: green;
}

div.spoiler-body {
  float: right;
  margin-right: -4%;
  display: none;
} 

img.image-right-header {
  width: 85%;
  height: auto;
}
  
button.spoiler-title:click ~ div.spoiler-body {
  display: block;
} 

   /* крестик закрытия Блока */
button.close-btn:before {   
  position: absolute;
  content: "\f00d";
  font-family: FontAwesome;
  font-size: 100%;
  top: 3%;
  right: 2%;
  color: red;
} 

button.close-btn:click ~ div.spoiler-body {
  display: none;
}

JavaScript

/* При клике на кнопку, справа появляется блок, а центральный уменьшается влево на 26%. При вторичном клике, правый Блок исчезает, а центральный снова расширяется. */
$(document).ready(function() {
    $('.spoiler-body').hide();
    $('.spoiler-title').click(function() {
        $(this).next().toggle(500)
        $('#sliders-womens-left').css('width', '74%') // ширина левого слайдера
    
	    $('.spoiler-title').click(function() {
		    $('.spoiler-body').hide(500)
		    $('#sliders-womens-left').css('width', '100%') /*ширина левого слайдера*/
	    });
	});
});