JSFiddle - React, Tailwind, and code Playground

HTML

<div style="height: 350px; margin-left: 0px;" id="legend">
    <h2>Blabla</h2>
    <p class="table-caption">Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam euismod pellentesque justo, eget lacinia est dictum ac. Nulla ut lectus sit amet ipsum porttitor tristique quis et mauris. Interdum et malesuada fames.</p>
    
    <div>
        <h2>Tableau</h2>
        <table>
            <tbody><tr>
                <td>Ligne 1</td>
                <td>Ligne 2</td>
            </tr>
        </tbody></table>
    </div>
</div>

CSS

#legend {
    transition: margin-left 0.5s ease 0s;
    height: 100%;
    overflow-y: auto;
    margin-left: -100%;
    border-right: 1px solid #000;
    color: #333;
}