JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
<html>
<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1.0">
    <title>HOME</title>
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css">
</head>
<body>
<div id="page">
    <main id="content">
        <div id="content-inner">
            <div id="clickable">click</div>
            <div id="sub-content">
                <div class="custom-control custom-radio">
                    <input id="input_radio" type="radio" class="custom-control-input">
                    <label for="input_radio" class="custom-control-label"> Label</label>
                </div>
            </div>
            <p style="height: 1000px">make scrollable content</p>
        </div>
    </main>
</div>
</body>
</html>

CSS

#page {
        display: flex;
        height: 100vh;
        width: 100vw;
    }

    #content {
        flex: 1 1 auto;
        overflow-y: scroll;
        -webkit-overflow-scrolling: touch;
    }

JavaScript

document.getElementById('clickable').addEventListener('click', function () {
        document.getElementById('sub-content').style.display = 'none';
    });