JSFiddle - React, Tailwind, and code Playground

HTML

<!DOCTYPE html>
    <html>
    <head>
    <title>SVG bug in Chrome?</title>
    <body>
    <h1>SVG bug in Chrome?</h1>
    <div>
        <p>
            The elemts in the &lt;foreignObject&gt; are not positioned properly unless the <code>.widget-body</code> rule is changed to:
                    <pre><code>.widget-body {
        background:yellow;
    /*  position: relative; /* This is the problem! */
        position: static;
    }</code></pre>
        </p>
            <h2>The Example:</h2>
        <svg xmlns="http://www.w3.org/2000/svg" version="1.1" width="1000" height="800">
        <g>
        <g transform="scale(1) translate(100, 200)" style="cursor: move;"><foreignobject pointer-events="fill" width="300" height="350">
        <body xmlns="http://www.w3.org/1999/xhtml" style="margin: 0px; height: 100%;">
        <table style="border-collapse: collapse; font-size: 11px; color: rgb(119, 68, 0); font-family: Arial,Helvetica; font-weight: normal; border-style: none;">
        <tbody>
        <tr>
            <td style="text-align: center; vertical-align: middle; white-space: nowrap;">
                <div style="width:300px;height:350px;position:static;">
                    <div class="widget" style="width: 300px;">
                        <div style="-moz-user-select: none;">
                            <span>My Widget Title</span>
                        </div>
                        <div>
                            <div class="widget-body" style="width: 298px; height: 323px;">
                                <div style="width: 298px; height: 323px;">
                                    <div style="width: 298px; height: 323px;">
                                        This position of this yellow square <br />should approximately (100, 200)
                                        <div style="position:absolute;bottom:0;right:0;background:red;color:white;font-weight:bold;">
                                            This red square <br />should be <br />in...

CSS

code {
        background: #FFFAEE;
    }
    pre code {
        display:block;
    }
    .widget-body {
        background:yellow;
        position: relative; /* This is the problem! */
    }