title: How do I align 2 components next to each other in React?
body: <p>I've been building the UI for a chat room app in React. Everything was going fine until suddenly, it refreshes and the UI &quot;broke&quot;. Basically, I have 2 components, a Sidebar component and a Chat component. I use flex to position them. Here is my code:</p>
  <p>Sidebar.js</p>
  <pre><code>&lt;div className=&quot;sidebar&quot;&gt;
                  &lt;Card className=&quot;sidebar_card left&quot;&gt;
                      &lt;Icon icon=&quot;mountain&quot; iconSize={40} /&gt;
                      &lt;div&gt;
                          &lt;Button icon=&quot;search&quot; minimal fill large /&gt;
                      &lt;/div&gt;
                      &lt;div&gt;
                          &lt;Button icon=&quot;plus&quot; minimal fill large /&gt;
                      &lt;/div&gt;
                  &lt;/Card&gt;
                  &lt;Card className=&quot;sidebar_card right&quot;&gt;
                      &lt;div&gt;
                          &lt;h2 className=&quot;bp3-heading&quot;&gt;Smart Labs&lt;/h2&gt;
                          &lt;Popover content={popupMenu}&gt;
                              &lt;Button icon=&quot;chevron-down&quot; minimal /&gt;
                          &lt;/Popover&gt;
                      &lt;/div&gt;
                      &lt;CreateRoom /&gt;
                      &lt;Menu&gt;
                          {rooms.map(room =&gt; (
                              &lt;SelectRoom text={room.name} id={room.id} /&gt;
                          ))}
                      &lt;/Menu&gt;
  
                      &lt;div&gt;&lt;/div&gt;
                      &lt;Button text=&quot;People&quot; icon=&quot;new-person&quot; minimal outlined /&gt;
                      &lt;Menu&gt;
                          &lt;MenuItem text=&quot;Tony Quach&quot; /&gt;
                      &lt;/Menu&gt;
                  &lt;/Card&gt;
          &lt;/div&gt;
  </code></pre>
  <p>Chat.js:</p>
  <pre><code>&lt;div className=&quot;chat&quot;&gt;
              &lt;Card className=&quot;chat_card&quot;&gt;
              &lt;div className=&quot;chat_header&quot;&gt;
                  &lt;h2 className=&quot;bp3-heading&quot;&gt;{roomDetails?.name}&lt;/h2&gt;
                  &lt;Divider /&gt;
              &lt;/div&gt;
              &lt;div className=&quot;chat_body&quot;&gt;
                  {roomMessages.map(({ message, timestamp, user, userImage }) =&gt; (
                      &lt;Message
                          message={message}
                          timestamp={timestamp}
                          user={user}
                          userImage={userImage}
                      /&gt;
                  ))}
             &lt;/div&gt;
             &lt;ChatInput roomName={roomDetails?.name} roomId={roomId} workspaceId={workspaceId} /&gt;
             &lt;/Card&gt;
          &lt;/div&gt;
  </code></pre>
  <p>Sidebar.css:</p>
  <pre><code>.sidebar {
      display: flex;
      flex: 0.2;
      height: 100vh;
  }
  
  .sidebar_card {
      border-radius: 0;
      margin: 0;
  }
  
  .sidebar_card &gt; div {
      display: flex;
      justify-content: space-between;
  }
  
  .left &gt; div {
      margin: 10px 0 0;
  }
  
  .right &gt; div {
      margin: 0 0 20px;
  }
  </code></pre>
  <p>Chat.css:</p>
  <pre><code>.chat {
      display: flex;
      flex: 0.7;
      height: 100vh;
  }
  
  .chat_card {
      width: 100%;
      border-radius: 0;
      margin: 0;
  }
  
  .chat_header {
      margin: 0 20px 0;
  }
  
  .chat_body {
      margin: 20px 20px 0;
  }
  </code></pre>
  <p>And in App.js I just do:</p>
  <pre><code>&lt;div class=&quot;app&quot;&gt;
     &lt;Sidebar /&gt;
     &lt;Chat /&gt;
  &lt;/div&gt;
  </code></pre>
  <p>App.css:</p>
  <pre><code>app {
      display: flex;
  }
  </code></pre>
  <p>I use Blueprint.js</p>
  <p>I used border: 1px solid red to try to debug it, it seems that the Sidebar component, while only has a flex: 0.3 somehow takes up the whole width of the page and pushes Chat component down (so they stack on each other instead of align next to each other).</p>
  <p>Any suggestions? Thank you.</p>