JSFiddle - React, Tailwind, and code Playground

HTML

<div class=container>
<div class=circulo>Mais</div>
<div class=close>X</div>
</div>

CSS

.circulo {
    border-radius: 90%;
    height: 30px;
    width: 30px;
    background-color: blue;
    overflow:hidden;
    color: #fff;
    padding: 30px;
    float:left;
}

.close{
    background-color: red;
    height:15px;
    width:15px;
    color: #fff;
    position:relative;
    display: none;
}

JavaScript

function mostraInfo(elemento){
 $(elemento).html("Carregando...");
  $(elemento).stop().animate({
    width: "200px",
    height: "200px",
    padding: "10% 0 0 10%"
  }, {
    duration: 1000,
    specialEasing: {
        width: "linear",
        height: "linear"
    },
  complete: function() {
    $(elemento).html("informação informação informação informação informação informação informação informação informação informação ");
    $('.close').show();
  }
 });
}

function escondeInfo(elemento){
 $(elemento).html("");
  $(elemento).stop().animate({
    width: "30px",
    height: "30px",
    padding: "30px"
  }, {
    duration: 1000,
    specialEasing: {
        width: "linear",
        height: "linear"
    },
  complete: function() {
    $(elemento).html("Mais");
    $('.close').hide();
  }
 });
}

$('.circulo').click(function(){
mostraInfo(this);
});

$('.close').click(function(){
    escondeInfo($('.circulo'));
});