JSFiddle - React, Tailwind, and code Playground

HTML

<holder>
  <column>
    <item>I stay left No matter what</item>
  </column>
  <column>
    <item id="a">A. I'll move down if the screen gets too small</item>
    <item id="b">B. I'll move down below A if the screen gets too small</item>
    <item id="c">C. I'll move down below A and B if the screen gets too small
    </item>
    <item id="d">
      D. I'll move down below A, B, and C if the screen gets too small
    </item>
  </column>
</holder>

CSS

holder {
    display: flex;
    flex-flow: row nowrap;
}

column {
  display: flex;
  flex: 1;
  /*this value controls how small the column can get before the right one wraps under the left*/
  flex-flow: row wrap;
  background: lightyellow;
}

item {
    border: 1px solid blue;
    flex: 1;
    min-width: 100px;
}

item#a{
  background: pink;
}

item#b{
  background: coral;
}

item#c{
  background: dodgerblue; 
}

item#d{
  background: gold;
}