title: CSS Flex spacing issue
body: <p>I'm having trouble figuring out how to have two columns (which get shrunk into one big column when the screen size shrinks) display their whole content without overlapping. <a href="https://imgur.com/a/4cYDS" rel="nofollow noreferrer">Here's the images of what is happening</a> The first is when the app is on a larger screen, where the flex-direction is set to row. When the screen size is smaller, I have it switch flex-direction to column, which works well except I cannot figure out how to make the 2nd row (Trending Down) start where the Trending Up stops, where ever that may be. Instead it's starting the 2nd column right in the middle of it like you see in the image.</p>
  
  <p>Here's the code full size:</p>
  
  <pre><code>.playersColumns {
  display: flex;
  flex-direction: row;
  justify-content: center;
  padding-top: 28px;
  align-items: center;
  } 
  
  .playersBody {
  flex-wrap: wrap;
  min-width: 255px;
  }
  </code></pre>
  
  <p>Here is the code when width &lt; 600px (where the issue is occurring)</p>
  
  <pre><code>.playersColumns {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding-left: 52px;
  }
  </code></pre>
  
  <p>As you can see, players are being entered into the database, being displayed, and voted on. I need to have it line up one section on top of the other if there are only 2 players, or 20 players listed in Trending Up.</p>
  
  <p>Here's the React:</p>
  
  <pre><code>&lt;div className="playersColumns"&gt;
        &lt;div className="playersBody"&gt;
          &lt;span className="trendHeaderUp"&gt;TRENDING UP&lt;/span&gt;
          {
            orderedPlayersUp.map((player) =&gt; {
              return (
                &lt;Player
                  playerContent={player.playerContent}
                  playerId={player.id}
                  key={player.id}
                  upvotePlayer={this.upvotePlayer}
                  downvotePlayer={this.downvotePlayer}
                  userLogIn={this.userLogIn}
                  userLogOut={this.userLogOut}
                /&gt;
              )
            })
          }
        &lt;/div&gt;
        &lt;div className="playersBody"&gt;
          &lt;span className="trendHeaderDown"&gt;TRENDING DOWN&lt;/span&gt;
          {
            orderedPlayersDown.map((player) =&gt; {
              return (
                &lt;Player
                  playerContent={player.playerContent}
                  playerId={player.id}
                  key={player.id}
                  upvotePlayer={this.upvotePlayer}
                  downvotePlayer={this.downvotePlayer}
                  userLogIn={this.userLogIn}
                  userLogOut={this.userLogOut}
                /&gt;
              )
            })
          }
        &lt;/div&gt;
      &lt;/div&gt;
  </code></pre>