How to set an outside element inside a flex-box

my code is

<div className="app-container">    <div className="border-content">      <OptionsPanel />      <TrendingList />    </div>    <div className="tweets-list-container">      <TweetList results={tweets} />    </div>  </div>  

and with flexbox is currently displayed in the screen like:

OPTIONS-PANEL | TRENDING-LIST | TWEETS-LIST  

but what i want is

OPTIONS-PANEL | TWEETS-LIST | TRENDING-LIST (like the twitter page)  

Is something that can i do to fix this with CSS? Or i should refactor my JSX code? I did it like that because i'm layouting mobile-first and it looks well.

https://stackoverflow.com/questions/66165151/how-to-set-an-outside-element-inside-a-flex-box February 12, 2021 at 09:03AM