JSFiddle - React, Tailwind, and code Playground

HTML

<div class="container">
  <div class="longhand red">
    <p>Some content</p>
  </div>
  <div class="longhand blue">
  </div>
</div>

<div class="container">
  <div class="shorthand red">
    <p>Some content</p>
  </div>
  <div class="shorthand blue">
  </div>
</div>

CSS

.container
{
  display: flex;
}

.longhand
{
  flex-basis: 0;
  flex-grow: 1;
  flex-shrink: 1;
}

.shorthand
{
  flex: 1 1 0;
}

.red
{
  background-color: red;
}

.blue
{
  background-color: blue;
}