title: Flexbox layout not being responsive
body: <p>I am trying to make this responsive and have both of them scale down when I change the screen size. However the alignment doesn't work properly and I don't know what the problem is.</p>
  
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>#noteUIContainer {
    display: flex;
    position: absolute;
    bottom: 0px;
    top: 55px;
    width: 100%
  }
  #noteList {
    width: 175px;
    flex: 1;
    /* The below change allows you to scroll the note preview */
    overflow-y: auto;
    background-color: rgb(242, 242, 242);
    border-right: 1px rgb(30, 30, 30) solid;
    /* Make changes below this line */
  }
  #note {
    flex: 3;
    padding-left: 20px;
    /* Make changes below this line */
  }
  #header {
    background-color: black;
    color: white;
    padding: 18px;
    /* Make changes below this line */
  }
  .notePreview {
    height: 70px;
    border-bottom: 1px rgb(30, 30, 30) solid;
    line-height: 90%;
    border-top: 15px rgb(209, 209, 209) solid;
  }
  .notePreview h3 {
    font-size: 12pt;
    line-height: inherit;
    font-weight: 400;
  }
  .notePreviewText {
    font-size: 9pt;
    text-overflow: ellipsis;
    overflow: hidden;
    white-space: nowrap;
    padding-bottom: 26px;
    border-bottom: 1px rgb(30, 30, 30) solid;
  }
  #dateModified {
    color: rgb(128, 128, 128);
    font-size: 10pt;
    padding-top: 20px;
  }
  body {
    margin: auto;
    font-family: sans-serif;
  }
  /*
      Add any relevant styles below here.
      */
  
  #note h3 {
    font-weight: bold;
    padding-top: 20px;
    border-bottom: 1px rgb(30, 30, 30) solid;
  }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>&lt;div id="header"&gt;
    Elephant - Your Notes
  &lt;/div&gt;
  &lt;div id="noteUIContainer"&gt;
    &lt;div id="noteList"&gt;
      &lt;div class="notePreview"&gt;
        &lt;h3&gt;HTML Notes&lt;/h3&gt;
        &lt;p class="notePreviewText"&gt;
          In HTML, you will always want to have the html, body, and head tag.
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="notePreview"&gt;
        &lt;h3&gt;CSS Notes&lt;/h3&gt;
        &lt;p class="notePreviewText"&gt;
          CSS offers some great features in stylizing your HTML.
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="notePreview"&gt;
        &lt;h3&gt;FlexBox Notes&lt;/h3&gt;
        &lt;p class="notePreviewText"&gt;
          With flexbox, you can create some pretty awesome layouts!
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="notePreview"&gt;
        &lt;h3&gt;JavaScript Notes&lt;/h3&gt;
        &lt;p class="notePreviewText"&gt;
          JavaScript can really bring a web page to life.
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="notePreview"&gt;
        &lt;h3&gt;PHP Notes&lt;/h3&gt;
        &lt;p class="notePreviewText"&gt;
          PHP is a very flexible language and easy to learn!
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="notePreview"&gt;
        &lt;h3&gt;Database Notes&lt;/h3&gt;
        &lt;p class="notePreviewText"&gt;
          We have to be careful when creating our database schema.
        &lt;/p&gt;
      &lt;/div&gt;
      &lt;div class="notePreview"&gt;
        &lt;h3&gt;Session State Notes&lt;/h3&gt;
        &lt;p class="notePreviewText"&gt;
          HTTP does not remember anything, so we have to do it with session.
        &lt;/p&gt;
      &lt;/div&gt;
    &lt;/div&gt;
    &lt;div id="note"&gt;
      &lt;h3&gt;HTML Notes&lt;/h3&gt;
      &lt;span id="dateModified"&gt;Date Modified: July 12th 2054&lt;/span&gt;
      &lt;br /&gt;
      &lt;p&gt;
        In HTML, you will always want to have the html, body, and head tag.
      &lt;/p&gt;
      &lt;textarea rows="15" cols="75"&gt;
      &lt;/textarea&gt;
    &lt;/div&gt;
  &lt;/div&gt;</code></pre>
  </div>
  </div>
  </p>