title: How do I place two divs next to each other without messing up the footer
body: <p>Here is my HTML, I want to place £first next to £second, but when I try to use float: left;, my footer ignores my content and moves to the top of my page. Is there any way to solve this?</p>
  
  <pre><code>&lt;!DOCTYPE html&gt;
  &lt;html&gt;
  &lt;link rel = "stylesheet" href = "style.css"&gt;
      &lt;head&gt;
          &lt;title&gt;Home&lt;/title&gt;
      &lt;/head&gt;
      &lt;body bgcolor="lightgrey"&gt;
          &lt;header&gt;
              &lt;h1&gt;
                  HEADING
              &lt;/h1&gt;       
          &lt;/header&gt;
          &lt;/div id="wrapper"&gt;
              &lt;div id="first"&gt;
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua.
              &lt;/div&gt;  
              &lt;div id="second"&gt;   
                  Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod
                  tempor incididunt ut labore et dolore magna aliqua.
              &lt;/div&gt;
  
          &lt;/div&gt;
          &lt;footer&gt;
              Footer text here
          &lt;/footer&gt;
  &lt;/body&gt;
  &lt;/html&gt;
  </code></pre>
  
  <p>Here's the CSS. I managed to solve the footer issue by adding display: flex; on the body and flex-direction: column; but now the divs won't sit next to each other</p>
  
  <pre><code>body{
          min-height: 100vh;
          display: flex;
          flex-direction: column;
  }
  header{
          padding: 10px;
          background-color: black;
          height: 70px;
          opacity: 80%;
  }
  footer{
          padding: 10px;
          background-color: black;
          height: 70px;
          opacity: 80%;
          color: white;
          margin-top: auto;
  }
  
  }   
  #wrapper {
    display: flex;
  }
  </code></pre>