JSFiddle - React, Tailwind, and code Playground

HTML

<div class="case1">
	<p>100px fixed width content in grid items</p>
    <p>1fr 2fr - flexbox</p>
    <div class="grid" style="display: flex;">
        <div class="griditem gridCol1" style="flex: 1;"><div class="content">1</div></div>
        <div class="griditem gridCol2" style="flex: 2;"><div class="content">2</div></div>
    </div>
    
    <p>1fr 2fr - grid</p>
    <div class="grid" style="grid-template-columns: 1fr 2fr;">
        <div class="griditem gridCol1"><div class="content">1</div></div>
        <div class="griditem gridCol2"><div class="content">2</div></div>
    </div>
	
	<p>0.5fr 1fr - flexbox</p>
	<div class="grid" style="display: flex;">
        <div class="griditem gridCol1" style="flex: .5;"><div class="content">1</div></div>
        <div class="griditem gridCol2" style="flex: 1;"><div class="content">2</div></div>
    </div>
	
	<p>0.5fr 1fr - grid</p>
	<div class="grid" style="grid-template-columns: 0.5fr 1fr;">
        <div class="griditem gridCol1" style=""><div class="content">1</div></div>
        <div class="griditem gridCol2" style=""><div class="content">2</div></div>
    </div>
	
	<p>0.3fr 0.6fr - flexbox</p>
	<div class="grid" style="display: flex;">
        <div class="griditem gridCol1" style="flex: .3;"><div class="content">1</div></div>
        <div class="griditem gridCol2" style="flex: .6;"><div class="content">2</div></div>
    </div>
	
	<p>0.3fr 0.6fr - grid</p>
	<div class="grid" style="grid-template-columns: 0.3fr 0.6fr;">
        <div class="griditem gridCol1"><div class="content">1</div></div>
        <div class="griditem gridCol2"><div class="content">2</div></div>
    </div>

	</div>

CSS

.griditem {
		border: 10px solid blue;
		background: lightblue;
		min-width:0px;
	}
	.grid {
		float: left;
		display: -ms-grid;
		display:grid;
		border: 20px solid red;
		background: orange;
		clear:both;
		font-size:16px;
	}
  .gridCol1 {
    -ms-grid-column: 1;
    grid-column-start:1;
  }

  .gridCol2 {
    -ms-grid-column: 2;
    grid-column-start: 2;
  }
  .content{
		width:100px;
		background:lime;
	}
	p {
		clear: left;
		font-size: 16px;
		margin:0px;
		padding-top:16px;
	}
	.case1 {
		float:left;
		border:2px solid black; 
	}
	.case2 {
		float:left;
		border:2px solid black; 
	}