JSFiddle - React, Tailwind, and code Playground

HTML

<label for="toggle" id="t-title">Hier erscheint der Titel</label><input type="checkbox" id="toggle">
<div>abore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ametbum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem Start dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanc

</div>
Start dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ametbum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem Start dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ametbum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem 

Start dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit ametbum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem Start dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo...

CSS

body {
   line-height: 18px;
   max-width: 800px;
}

input[type=checkbox] {
   float: left;
   opacity: 0;
   max-width: 50%;
   z-index: 1;
}

#t-title {
   z-index: 2;
   padding: 0px 20px 24px 20px;
   background: #1e477b;
   color: white;
   float: left;
   border-top: 5px solid #1e477b;
   border-bottom: 12px solid #1e477b;
   margin-top: 0px;
   margin-right: 10px;

}

#t-title:before {
    content: url('http://www.gruenderszene.de/wp-content/uploads/2016/11/Plus.png');
    position:absolute;
    margin-top: -33px;
    margin-left: 10px;
    transform: scale(.2);
    z-index: 3;
    display: block;
    content-position: left;
}

#t-title:hover {
   cursor: pointer;
}

input#toggle {
   height: 0px;
   margin: 0px;
}

/* Default State */
div {
   line-height: inherit;
   color: white;
   opacity: 0;
   max-height: 0;
   visibility: hidden; 
   float: left;
}

/* Toggled State */
input[type=checkbox]:checked + div {
   z-index: 0;
   text-align: block;
   background: #1e477b;
   max-height: none;
   display: flex;
   visibility: visible;
   opacity: 1;
   width: 50%;
   float: left;
   margin-right: 14px;
   margin-bottom: 8px;
   margin-top: 6px;
   padding: 12px 20px 12px 20px;
   border-top: 6px solid rgba(0,0,0,0);
   text-align: justify;
   line-height: inherit;
   transition: all 0.45s ease-in;
   -webkit-transition: opacity 0.45s ease-in;
   -moz-transition: all 0.45s ease-in;
   -o-transition: all 0.45s ease-in;
   transition-delay: 0.5s ease-in;
   -webkit-transition-delay: 0.5s ease-in;
   -moz-transition-delay: 0.5s ease-in;
   -o-transition-delay: 0.5s ease-in;
}

input[type=checkbox]:checked {
   width: 50%;
   clear: both;
}

input[type=checkbox]:checked + div {
  content: '';
  position: absolute;
  padding: 10px 10px 10px 0px;

  background: red;
  z-index: -9;
}

@media screen and (max-width: 300px) {
  
}

/* Disable State, not working -> max-height & visibility dont accept transition */
input[type=checkbox]:not(:checked) + div {
}