Flexbox layout not being responsive
<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>