JSFiddle - React, Tailwind, and code Playground

HTML

<div id="postcontainer">
<div class="nonphoto">
    <p>text text text</p>
    <p>text text</p>
    <p>text text text text text</p></div>
  <div class="postinfo">
      <div>
      date
      source
      via
      </div>
  </div>
  
</div>

CSS

#postcontainer {
        display:block;
        position:absolute;
        width:600px;
        border:1px solid #eeeeee;
        margin-left:20%;
        margin-top:5%;
    }
.nonphoto {
        /*width:450px;*/
        display:inline-block;
        margin-bottom:50px;
    vertical-align: top;
    }
.postinfo {
        border:1px solid #333;
        width:10px;
        height:10px;
        padding:2px;
        background-color:#eeeeee;
        display:inline-block;
        margin-left:15px;
        margin-top: 1em;
        transition:0.5s;
    vertical-align: top;
    }
    .postinfo div {
        opacity:0;
        font-size:10px;
        transition-duration:0.2s;
    } 
   .postinfo:hover {
        width:35px;
        height:55px;
        padding:5px;
        transition:0.5s;
    }
    .postinfo:hover div {
        opacity:1;
        transition-duration:0.5s;
        transition-delay:0.5s;
    }