JSFiddle - React, Tailwind, and code Playground

HTML

<div id="info2">

<p class="moreinfo" id="info1">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Donec a elit mi. Praesent a metus lorem. Cras eget arcu ut purus varius aliquam. Suspendisse in ante sem. Donec faucibus mi non commodo consequat. Ut consectetur massa tortor, eget pellentesque velit dapibus vitae. Phasellus a urna vel urna condimentum fringilla ultricies vitae nulla. Integer in lacus sit amet enim rhoncus interdum. Nam gravida consequat tristique. Nunc elementum venenatis sapien, sed dictum magna hendrerit eget.</p>

<a class="more" target="1">Show Info (+)</a>

</div> <!-- info2 -->

CSS

#info, #info2 {
 background: #00a8c3;
 /*display: none;*/
 float: left;

 left: 2%;
 margin: 0 0 20px 0;
 opacity: 0.9;
 padding: 15px;
 position: absolute;
 /*width: 570px;*/
 width: 300px;
 z-index: 400;
}

#info2 {
 background: #00a8c4;
 display: block;
}

JavaScript

$('.moreinfo').hide();

$('.more').click(function (ev) {
var t = ev.target

$('#info' + $(this).attr('target')).slideToggle(500, function(){
console.log(ev.target)

$('#info2').animate({width: 570, height: 570, marginLeft: 0}, {duration: 2000},
        "linear");
});

$(t).html($(this).is(':visible')? 'Hide Info (x)' : 'Show Info (+)')

});



return false;