JSFiddle - React, Tailwind, and code Playground

HTML

<div id ="container">
<div class="toggle-default">
    <div class="toggle">
<div class="toggle_title toggle_active">LINE-UP</div>
<div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div>

</div>
    </div>

<div class="toggle-default">
    <div class="toggle">
<div class="toggle_title toggle_active">LINE-UP</div>
<div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div>

</div>
    </div>

<div class="toggle-default">
    <div class="toggle">
<div class="toggle_title toggle_active">LINE-UP</div>
<div class="toggle_content" style="display:block;">Lorem ipsum sit dolor amet</div>

</div>
    </div>
    
</div>

CSS

#container { margin-left: auto; margin-right: auto; width: 92%; max-width: 1120px; color: #505050; font-size: 125%; font-family: "Open Sans", Arial, sans-serif; line-height: 162.5%; margin-bottom: 70px; font-weight: 300; }

.toggle{ margin-bottom: 5px; 
clear: both; float: left; 
position: relative;  
width: 100%; 
    background:red;
}
.toggle .toggle_title {
position: relative;
font-size: 112.5%;
font-weight: 700;
padding-bottom: 15px;
padding-left: 25px;
text-decoration: none;
}
.toggle_title, .toggle_content {
    position:relative;
    z-index:2;

}

.toggle:before {
    content:"";  
    width:4000px;
    position:absolute;
    height:100%;
    background-color:red;
    left:-50%;
    z-index:1
        
}