JSFiddle - React, Tailwind, and code Playground

by parksd

HTML

<div id="p1">
  <div class="a a1"></div>
  <div class="a a2"></div>
  <div class="a a3"></div>
</div>
<BR>
<div id="p2">
  <div class="a a1"></div>
  <div class="a a3"></div>
</div>

SCSS

#p1 {
  width: 100%;
  height: 60px;
  background: blue;
  display: flex;
  .a {
    width: 100px;
    height: 50px;    
  }
  .a1,
  .a3 {
    background: red;
    border: solid black 1px;    
  }

  .a2 {
		flex:auto;
	}

  .a1 {
		flex: 0 0 100px;
	}
  
  .a3 {
    flex: 0 1 100px;
  }
}

#p2 {
  width: 100%;
  height: 60px;
  background: blue;
  position: relative;
  .a {
    float: left;
    width: 100px;
    height: 50px;
    background: red;
    border: solid black 1px;
  }
  .a3 {
    position: absolute;
    right: 0px;
  }
}