JSFiddle - React, Tailwind, and code Playground

HTML

<html>
<body>
  <div class="f1">
    <pre>
  Hello my friends !!! (1)
  Hello my friends !!! (2)
  Hello my friends !!! (3)
  Hello my friends !!! (4)
  Hello my friends !!! (5)
  Hello my friends !!! (6)
  Hello my friends !!! (7)
  Hello my friends !!! (8)
  Hello my friends !!! (9)
  Hello my friends !!! (10)	
    </pre>
    <div class="f2">Hi</div>
  </div>
</body>
</html>

CSS

.f1
    {
      width:100%;
      height: 200px;
      position: relative;
      background: #CCC;
    }	
    pre {
      float:left;
    }
    .f2
    {
      position:absolute;
      width: 10%;
      height: 100px;
      right:0;
      margin-top: 50px;
      background: #7DE2D2;
    }