JSFiddle - React, Tailwind, and code Playground

HTML

<div class="main">
  <div class="left-content">
    <div class="content">
      content
    </div>
    <div class="left">
      left
    </div>
  </div>
  <div class="right">
    right
  </div>
</div>

CSS

.main{
  display:flex;
  flex-direction: row;
}

.left-content
{
  display:flex;
  flex-direction: row;
  order:1;
  flex-grow:1;
}

.content{
  order:2;
  flex-grow:1;
}
.left{
  width:100px;
  order:1;
}
.right{
  width:100px;
  order:2;
}

@media (max-width: 500px) {
  .main{
    flex-direction: column;
  }
  
}

@media (max-width: 300px) {
  .left-content{
    flex-direction: column;
  }
  
}