JSFiddle - React, Tailwind, and code Playground

HTML

<label class="text-chkbox">
    <div class="label-text">
        hello
    </div>
    <input type="checkbox" />
    <div class="hidden-text">
        world<br/>
        world<br/>
        world
    </div>
</label>

SCSS

.text-chkbox {
    display: block;
    position: relative;
    .label-text {
        cursor: pointer;
    }
    .hidden-text {
        display: block;
        overflow: hidden;
        max-height: 0px;
        opacity: 0;
        transition: opacity .3s 0s;
    }
    input {
        position: absolute;
        width: 1px; height: 1px;
        top: -20px; left: -20px;
    }
    input:checked + .hidden-text {
        max-height: none;
        opacity: 1;
    }    
}