JSFiddle - React, Tailwind, and code Playground

HTML

<div class="td">
<div class="title main-color">test text</div>
</div>

<div class="td">
<div class="title main-color">test text is bigger now and goes outside of div and dont appears</div>
</div>

CSS

.main-color {
    opacity: 0.6;
    background: #ffffff;
}

.title {
    height: 100%;
    width: 470px;
    border-radius: 20px;
    float: left;
    text-align: center;
    line-height: 100px;
    font-size: 26px;
    overflow: hidden;
}

.td {
    margin: 60px 0;
    height: 100px;
    width: 100%;
}