JSFiddle - React, Tailwind, and code Playground

HTML

<!-- First preview box -->
    <div class="preview">
        <p>Some preview text <a id="trigger1" href="#">&hellip;</a></p>
    </div>
    
<!-- First preview content -->
    <div id="entry1" class="entry">
      <div class="close_button">
        <a id="close1" href="#">&times;</a>
      </div>
      <p>Some content text.</p>
    </div>

<!-- Second preview box -->
    <div class="preview">
        <p>Some preview text <a id="trigger2" href="#">&hellip;</a></p>
    </div>
    
<!-- Second preview content -->
    <div id="entry2" class="entry">
      <div class="close_button">
        <a id="close2" href="#">&times;</a>
      </div>
      <p>Some content text.</p>
    </div>

<!-- Animation -->
    <script>
      $('#entry1').hide();
      $('#trigger1').click( function() {
        $('#entry1').slideDown('800')
      });
      $('#close1').click( function() {
        $('#entry1').slideUp('800')
      });
      
      $('#entry2').hide();
      $('#trigger2').click( function() {
        $('#entry2').slideDown('800')
      });
      $('#close2').click( function() {
        $('#entry2').slideUp('800')
      }); 
    </script>

CSS

.preview { outline: 1px solid; width: 150px; padding: 5px; margin: 5px; float: left; }
.entry { outline: 1px solid; width: 500px; padding: 5px; margin: 5px; float: left; }
.close_button { text-align: right; }