JSFiddle - React, Tailwind, and code Playground

by tsayen

HTML

<div class="parent">
    <div class="left-container">
        <p>some other content</p>
    </div>
    <div class="bottom-container">
        <div class="table-container">
            <table>
                <tr><td>row 1</td></tr>
                <tr><td>row 2</td></tr>
                <tr><td>row 3</td></tr>
                <tr><td>row 4</td></tr>
                <tr><td>row 5</td></tr>
                <tr><td>row 6</td></tr>
                <tr><td>row 7</td></tr>
                <tr><td>row 8</td></tr>
            </table>
        </div>
        <div class="buttons-container">
            <button type="button">a button</button>
            <div style="clear:both;">
        </div>
    </div>
 </div>

CSS

.parent {
    position: relative;
    width: 800px;
    height: 600px;
    border: 1px solid orange;
    padding: 2px 2px 2px 2px;
}

.left-container {
    border: 1px solid cyan;
    padding: 2px 2px 2px 2px;
}

.bottom-container {
    border: 1px solid grey;
    position: fixed;
    bottom: 0;
    right: 0; 
    width: 80%;
    height: 10em;
    padding: 2px 2px 2px 2px;
}

.table-container {
    height: 7.6em;
    overflow: auto;
    border: 1px solid blue;
    padding: 2px 2px 2px 2px;
}

.buttons-container {
    border: 1px solid red;
    padding: 2px 2px 2px 2px;
}

.buttons-container button {
    float: right;
}