JSFiddle - React, Tailwind, and code Playground

HTML

<script src="https://code.jquery.com/jquery-latest.min.js"></script>
<p>
  <u>Lisätieto piilotetussa elementissä</u>
</p>

<div class="toggleEvent box">
  <p>
    Mieleni minun tekevi, 
    aivoni ajattelevi 
    lähteäni laulamahan, 
    saa'ani sanelemahan, 
    sukuvirttä suoltamahan, 
    lajivirttä laulamahan
  </p>
  <div class="infoToggle">Lisätietoa</div>
  <p class="additionalInfo border-top">
    Katkelma Kalevalan ensimmäisestä runosta
  </p>
</div>

<p>
  <u>Lisätieto piilotetussa elementissä + slide</u>
</p>

<div class="toggleEvent box">
  <p>
	  Nousi siitä Väinämöinen 
    jalan kahen kankahalle 
    saarehen selällisehen, 
    manterehen puuttomahan. 
  </p>
  <div class="infoToggle slide">Lisätietoa</div>
  <p class="additionalInfo border-top">
    Katkelma Kalevalan toisesta runosta
  </p>
</div>

<p>
 <u>Lisätieto data-attribuutissa</u>
</p>

<div class="box">
  <p>
   	Vaka vanha Väinämöinen 
    elelevi aikojansa 
    noilla Väinölän ahoilla, 
    Kalevalan kankahilla. 
    Laulelevi virsiänsä, 
    laulelevi, taitelevi.
  </p>
  <div class='infoToggle infoToggle-data' data-info="Katkelma Kalevalan kolmannesta runosta">Lisätietoa</div>
</div>

<p>
  <u>Lisätieto data-attribuutissa + fade</u>
</p>

<div class="box">
  <p>
	  Tuopa Aino, neito nuori, 
    sisar nuoren Joukahaisen, 
    läksi luutoa lehosta, 
    vastaksia varvikosta. 
    Taittoi vastan taatollensa, 
    toisen taittoi maammollensa, 
    kokoeli kolmannenki 
    verevälle veijollensa. 
  </p>
  <div class='infoToggle infoToggle-data fade' data-info="Katkelma Kalevalan neljännestä runosta">Lisätietoa</div>
</div>

<p>
 <u>Lisätieto kääntöpuolella</u>
</p>

<div class="container">
  <div class="card">
    <figure class="front">
      <div class="box">
        <p>
	        Jo oli sanoma saatu, 
          viety viesti tuonnemmaksi 
          neien nuoren nukkumasta, 
          kaunihin katoamasta. 
        </p>
        <div class='infoToggle infoToggle-flip'>Lisätietoa</div>
     ...

CSS

html {
  font-family: arial;
}


.toggleEvent > .additionalInfo {
  display:none;
}

.additionalInfo {
  margin-top:10px;
  padding-top:10px;
  color:teal;
}

.border-top {
    border-top:2px solid #CCC;
}

.additionalInfo:before {
  content: "";
  display: block;
  background: url('https://upload.wikimedia.org/wikipedia/commons/d/d8/Gallen-Kallela_The_defence_of_the_Sampo.png');
  width: 100px;
  height: 100px;
  float: left;
  background-size:cover;
  margin-right:20px;
}

.hide {
  display:none;
}

.box {
  width: 230px;
  padding:20px;
  border-radius:10px;
  border:2px solid #CCC;
  margin:20px;
  -webkit-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.45);
  -moz-box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.45);
  box-shadow: 10px 10px 5px 0px rgba(0,0,0,0.45);
}

.infoToggle {
  color: teal;
  text-decoration:underline;
  cursor:pointer;
}

.card {
  width: 230px;
  height: 100%;
  position: absolute;
  transform-style: preserve-3d;
  transition: transform 1s;
}

.card figure {
  margin: 0;
  display: block;
  position: absolute;
  width: 100%;
  height: 100%;
  backface-visibility: hidden;
}

.card .back {
  transform: rotateY( 180deg );
}

.card.flipped {
  transform: rotateY( 180deg );
}

JavaScript

//Lisätiedon teksti piilotetussa elementissä
//################################################
$(".toggleEvent .infoToggle").click(function() {
  //Onko slide käytössä
	var slideToggle = $(this).hasClass("slide");
	if(slideToggle) {
     //Jos on, 500ms kestoinen slide -efekti
  	 $(this).parent().children(".additionalInfo").slideToggle(500);
  }
  else {
     //Jos ei, näytetään normaalisti
  	 $(this).parent().children(".additionalInfo").toggle();
  }

});
//################################################

//Lisätiedon tekstin ottaminen data-attribuutista
//################################################
$(".infoToggle-data").click(function() {
  //Onko Fade käytössä
  var fadeToggle = $(this).hasClass("fade");
  
  //Onko lisätieto jo näkyvissä
	if($(this).next().is('.additionalInfo'))
  {
    //Lisätieto näkyvissä
   
    if(fadeToggle) {
        //Jos Fade käytössä, 1000ms kestoinen fade -efekti, jonka jälkeen poistetaan elementti
      	$(this).next().fadeOut(1000, function() {
        	$(this).remove();
        });
    }
    else {
        //Jos Fade ei ole käytössä, poistetaan elementti suoraan
      	$(this).next().remove();
    }

  }
  else
  {
    //Lisätietoa ei ole näkyvissä
  
    if(fadeToggle) {
      //Jos Fade käytössä, lisätään piilotettu elementti, ja feidataan 1000ms ajalla
     	$(this).after("<p class='additionalInfo hide border-top'>" + $(this).data('info') + "</p>");
      $(this).next().fadeIn(1000);      
    }
    else {
      //Jos Fade ei ole käytössä, näytetään elementti normaalisti
  		$(this).after("<p class='additionalInfo border-top'>" + $(this).data('info') + "</p>");    
    }

  }
});
//################################################

//Flip -efekti (puolelta toiselle kääntäminen)
//Itse kääntäminen toteutettu CSS:llä (transform)
//################################################
$(".infoToggle-flip").click(function() 
{
  //Onko kortti jo käännetty
	if($(this).closest(".card").hasClass("flipped"))
  {
    //Jos on,...