JSFiddle - React, Tailwind, and code Playground

by Derek Nash

HTML

<div class="positioner_1">
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur sodales libero quis mollis venenatis. Etiam diam metus, posuere in dictum quis, semper quis orci. Morbi vitae consectetur quam, nec porta odio. Maecenas auctor molestie ornare. Quisque dictum est eu lorem condimentum, fermentum faucibus nisl posuere. In hac habitasse platea dictumst. Nullam enim nisl, venenatis quis nunc ac, interdum aliquet lectus. Fusce tincidunt tempus cursus. Quisque nec sodales dui. Donec sollicitudin faucibus venenatis. In tortor magna, placerat et vestibulum id, rutrum sed lacus. Nam ut odio et sapien euismod pretium.</p>
</div>
<div class="positioner_2">
    <table>
        <tr>
            <td style="min-width:200px; background-color: red;">&nbsp;</td>
            <td style="min-width:200px; background-color: green;"></td>
            <td style="min-width:200px; background-color: red;"></td>
            <td style="min-width:200px; background-color: green;"></td>
            <td style="min-width:200px; background-color: red;"></td>
            <td style="min-width:200px; background-color: green;"></td>
            <td style="min-width:200px; background-color: red;"></td>
            <td style="min-width:200px; background-color: green;"></td>
        </tr>
    </table>
</div>

CSS

div.positioner_1 {
    position: absolute;



} /*may not be needed: see below*/
p {
    display:block;
    position: fixed;
    float: left;
    margin:1%;
    padding:1%;
}
div.positioner_2 {
    display:block;
    position: relative;
    float: left;
    margin:1%;
    padding:1%;
} /*may not be needed: see below*/