JSFiddle - React, Tailwind, and code Playground

HTML

<div style="width:500px;height:200px; border:1px solid black;">
<div class="grid" style="-ms-grid-columns:0.4fr 0.5fr; grid-template-columns: 0.4fr 0.5fr;float:left;clear:both;border:5px solid red;">
  <div class="griditem" style="-ms-grid-column: 1;grid-column-start:1;min-width:0px;"><div class="inlineBlock"></div><div class="inlineBlock"></div></div>
  <div class="griditem" style="-ms-grid-column: 2;grid-column-start:2;background:yellow;min-width:0px;"><div class="inlineBlock"></div><div class="inlineBlock"></div></div>
</div>

<div class="grid" style="-ms-grid-columns:0.5fr 1fr; grid-template-columns: 0.5fr 1fr;float:left;xwidth:100px;clear:both;border:5px solid red;">
  <div class="griditem" style="-ms-grid-column: 1;grid-column-start:1;min-width:0px;"><div class="inlineBlock"></div><div class="inlineBlock"></div></div>
  <div class="griditem" style="-ms-grid-column: 2;grid-column-start:2;background:yellow;min-width:0px;"><div class="inlineBlock"></div><div class="inlineBlock"></div></div>
</div>

</div>

CSS

.griditem {
	  background: lightblue;
	}
	
	.grid {
	  display: -ms-grid;
	  display: grid;
	  background: orange;
	  font-size: 16px;
      xborder:5px solid pink;
	}
    .inlineBlock {
        display:inline-block;
        width: 98px;
        background:gray;
        height:20px;
        border:1px solid black;
    }