JSFiddle - React, Tailwind, and code Playground

HTML

<div class='mainPage'>
        <div class="leftSide">
            <h2 class='md-display-4'>EventUpside</h2>
        </div>
        <div class="rightSide">hello<br>
        ads
        asd
        ads
        </div>
    </div>

CSS

.mainPage {
        width: 100%;
        height: auto;
        background: red;
    }
    
    .leftSide {
        width: 35%;
        height: auto;
        float: left;
        background: rgba(0, 0, 0, .2);
       }
    
    .rightSide {
        width: 65%;
        height: 40px;
        float: right;
        background: rgba(0, 0, 0, .6);
    }
.md-display-4 {
  font-size: 11.2rem;
  font-weight: 300;
  letter-spacing: -.01em;
  line-height: 11.2rem;
    word-wrap: break-word;

}