JSFiddle - React, Tailwind, and code Playground

HTML

<div class="wrapper">
    <div class='tooltip'>A big tooltip which should be visible fully</div>
     A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
          A lot of text<br> 
     
</div>

CSS

.tooltip{
    color:red;
}
.wrapper {
    overflow:hidden;
    height:50px;
    border:1px solid black;
    width:50px;
}