score:0

instead of using w-100 and w-50-l you can use flex-grow-1 on both the inner divs. and similar to what you have done with widths, you can do with order to set the order in both mobile and desktop - see simplified demo:

body,html { height: 100%;}
<link href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.0/tachyons.min.css" rel="stylesheet" />
<div id="react-root" class="h-100" style="height:100%">
  <div class="ba b--red bw1 w-100 h-100 flex flex-wrap flex-auto flex-row-l flex-column">
    <div class="flex justify-center items-center bg-purple h-100-l order-1-l order-2 flex-grow-1"></div>
    <div class="bg-orange flex flex-column justify-center h-100-l order-2-l order-1 flex-grow-1 pb4-l"></div>
  </div>
</div>


now for the react part - you can toggle between flex-grow-1 and flex-grow-0 of the red section on click of the other section - see demo below:

class app extends react.component {
  constructor(props) {
    super(props);
    this.state = {toggle: false};
    this.handleclick = this.handleclick.bind(this);
  }
  handleclick() {
    this.setstate(state => ({toggle: !state.toggle}));
  }
  render() {
    return (
      <div classname="ba b--red bw1 w-100 h-100 flex flex-wrap flex-auto flex-row-l flex-column">
          <div classname="flex justify-center items-center bg-purple h-100-l order-1-l order-2 flex-grow-1" onclick={this.handleclick}></div>
          <div classname={`bg-orange flex flex-column justify-center h-100-l order-2-l order-1 pb4-l ${this.state.toggle ? 'flex-grow-1' : 'flex-grow-0'}`}></div>
      </div>
    )
  }
}
reactdom.render(<app />, document.getelementbyid("react-root"));
html,body{height:100%;}
<script src="https://cdnjs.cloudflare.com/ajax/libs/react/16.6.3/umd/react.production.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/react-dom/16.6.3/umd/react-dom.production.min.js"></script>
<link href="https://cdnjs.cloudflare.com/ajax/libs/tachyons/4.9.0/tachyons.min.css" rel="stylesheet" />
<div id="react-root" class="h-100"></div>


Related Query

More Query from same tag