JSFiddle - React, Tailwind, and code Playground

HTML

Red element positioned as expected in FF, Chrome and IE
<div>i am a div</div>

Why is the red element positioned differently in FF and IE?
<table>
    <thead>
        <tr><th>header 1</th><th>header 2</th></tr>
    </thead>
    <tbody>
        <tr><td>entry 1</td><td>entry 2</td></tr>
    </tbody>
</table>

CSS

table,
    div {
        border: 20px solid yellow;
        position: relative;
        margin-bottom: 30px;
        display: block;
    }
    
    table:before,
    div:before {
        background: red;
        content: " ";
        position: absolute;
        display: block; 
        top: 0;
        left: 0;
        width: 10px;
        height: 10px;	
    }