JSFiddle - React, Tailwind, and code Playground

HTML

<h1>SVG and foreignObject:</h1>
<svg xmlns="http://www.w3.org/2000/svg">
    <g transform="translate(50,50)">
        <rect width="200" height="200" rx="2"></rect>
        <foreignObject width="200px" height="200px">
        <div xmlns="http://www.w3.org/1999/xhtml" class="wrapper">
            <p id="topleft">topleft</p>
            <p id="topright">topright</p>
            <p id="middle">middle</p>
            <p id="bottomleft">bottomleft</p>
            <p id="bottomright">bottomright</p>
        </div>
       </foreignObject>
    </g>
</svg>
<h1>Plain HTML:</h1>
<div class="wrapper" style="left:50px; top:50px">
    <p id="topleft">topleft</p>
    <p id="topright">topright</p>
    <p id="middle">middle</p>
    <p id="bottomleft">bottomleft</p>
    <p id="bottomright">bottomright</p>
</div>

CSS

* { margin:0; }

svg {
    width:300px;
    height:300px;
}
rect {
    fill:#e4e4e4;
}
div.wrapper {
    position:relative;
    width:200px;
    height:200px;
    border:1px solid green;
}
p { 
    border: 1px solid red;
}
#topleft {
    float:left;
}
#topright {
    float:right;
}
#middle {
    clear:both;
    width:100%;
    float:left
}
#bottomleft {
    position:absolute;
    bottom:0;
    left:0;
}
#bottomright {
    position:absolute;
    bottom:0;
    right:0;
}