JSFiddle - React, Tailwind, and code Playground

HTML

<div class="baloon">
  <p>Giant Robot (yes, the same name as the album) is a side-project of Bucekthead's which has to date released only one album.</p>
  <span class="time">this is time</span>
</div>

<div class="baloon">
  <p>Giant Robot (yes, the same name as the album) is a side-project of Bucekthead's which has to date released only one album. Only one.</p>
  <span class="time">this is time</span>
</div>

<div class="baloon">
  <p class="with-transparent-phantom">Giant Robot (yes, the same name as the album) is a side-project of Bucekthead's which has to date released only one album.</p>
  <span class="time">this is time</span>
</div>

<div class="baloon">
  <p class="with-transparent-phantom">Giant Robot (yes, the same name as the album) is a side-project of Bucekthead's which has to date released only one album. Only one.</p>
  <span class="time">this is time</span>
</div>

SCSS

.baloon{
  position:relative;
  width:200px;
  background-color:cyan;

  p{
    &:after{
      content:"";
      display:inline-block;
      width:80px;
      height:20px;
      background-color:#000;
    }
    
    &.with-transparent-phantom{
      &:after{
        background-color:transparent;
        width:90px;
      }
    }
  }

  span{
    position: absolute;
    right:0;
    bottom:0;
    display: inline-block;
    background-color:#c3c3c3;
    width:80px;
  }
}