JSFiddle - React, Tailwind, and code Playground

HTML

<div id="Grid">
    <div class="GridItem" id="GridItem1">1<br>2<br>c<br>d<br>e<br>f<br>g<br>h<br>i<br></div>
    <div class="GridItem" id="GridItem2">2</div>
    <div class="GridItem" id="GridItem3"><div id="GridItemInner3">3a</div>3b</div>
    <div class="GridItem">4 gtkjgfftlgjflkgjfd gljdfklgjdflkgjdflkgjdflg</div>
    <div class="GridItem">5</div>
</div>
<p>efter</p>

CSS

#Grid {
    border: 1px solid grey;
    background-color: #ddd;
    display: block;
    position: relative;
    height: -webkit-calc(100px + 100px);
}
#Grid > * {
    box-sizing: border-box;
    position: absolute;
    border: 1px dotted black;
    top: 0;
    left: 0;
    width: 100px;
    height: 100px;
}
#GridItem1 {
    background: blue;
    height: 100px;
    width: 100%;
}
#GridItem2 {
    background: red;
    border: 3px solid yellow;
    top: 100px;
    width: 100px;
    height: auto;
}
#GridItem3 {
    position: relative;
    background: green;
    top: 100px;
    left: 100px;
    width: -webkit-calc(100% - 50% - 100px );
    height: auto;
}
#GridItemInner3 {
    position: absolute;
    right: 0px;
}