Margin between 2 elements, one of which has "position: fixed;"

Here is the JSFiddle to better understand my problem. When either one of the 2 lists separated by the yellow divider becomes long the vertical scroll bar of the browser appears, which is fine. However, when you scroll down to the very bottom the text Example_2.1 will not be seen, because it's hidden by the ATTENTION! box, which has a position: fixed; value.

.divider {
  border-bottom: 2px solid #fec303;
  margin-top: 15px;
  margin-bottom: 25px;
}

.meanings_and_examples {
  display: flex;
  flex-direction: column;
}

ol.circle {
  list-style-type: none;
}

li {
  line-height: 1.6;
}

ol.circle>li {
  counter-increment: item;
  margin-bottom: 2px;
  margin-left: 2.5em;
}

ol.circle>li::before {
  margin-right: 1em;
  margin-left: -2.7em;
  content: counter(item);
  background: #1f2c60;
  border-radius: 100%;
  color: white;
  width: 1.7em;
  text-align: center;
  display: inline-block;
}

ul {
  list-style-type: none;
  padding-bottom: 10px;
  padding-left: 2.5em;
}

.meaning {
  font-family: Tahoma, Geneva, sans-serif;
  width: auto;
  text-align: left;
  color: #1f2c60;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
  font-size: 3vw;
  font-weight: 700;
}

.example {
  width: auto;
  text-align: left;
  font-style: italic;
  font-weight: 400;
}

.example_translated {
  width: auto;
  text-align: left;
  color: #5d78e5;
}

.comment_box {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: fixed;
  bottom: 0;
  text-align: left;
  background: #fff8e5;
}

.comment_title {
  font-family: Verdana, Geneva, sans-serif;
  color: rgba(231, 237, 22, 0.58);
  margin-top: 8px;
  margin-left: 10px;
  text-shadow: 0 0 0.5em #f92504, 0 0 0.5em #f92504, 0 0 0.5em #f92504;
  font-size: 3vw;
  font-weight: 700;
}

.comment_text {
  width: auto;
  font-family: Tahoma, Geneva, sans-serif;
  color: #1f2c60;
  margin: 15px 10px 20px;
  text-shadow: none;
  font-size: 2vw;
  font-weight: 400;
}

<div class="meaning">
  <ol class="circle">
    <li>Text_1</li>
    <div class="example">
      <ul>
        <li>Example_1.1</li>
      </ul>
    </div>
    <li>Text_2</li>
    <div class="example">
      <ul>
        <li>Example_2.1</li>
        <li>Example_2.2</li>
      </ul>
    </div>
  </ol>
</div>

<div class="divider"></div>

<div class="meaning">
  <ol class="circle">
    <li>Text_1</li>
    <div class="example">
      <ul>
        <li>Example_1.1</li>
      </ul>
    </div>
    <li>Text_2</li>
    <div class="example">
      <ul>
        <li>Example_2.1</li>
      </ul>
    </div>
  </ol>
</div>

<div class="comment_box">
  <div class="comment_title">ATTENTION!
  </div>
  <div class="comment_text">Comment: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...
  </div>
</div>

How do i set a margin above the ATTENTION! box so that the last line of the list is always seen? It's essential that parameters of the list itself (like intervals between lines or paragraphs) stay the same as they are now.

Thank you!

Solution

Here's the way you can do it with JS. What this does is gets the height of the comment-box and then sets the margin on the last meaning div.

// Need to set an id on the comment-box. Now we select it.
let comment_box = document.getElementById('comment-box');
// Get the comment_box calculated height
let comment_box_height = comment_box.clientHeight;
// Gather all of the .meaning divs.
let meaning_array = document.querySelectorAll('.meaning');
// get the last meaning div from the node list.
let last = [].slice.call(meaning_array).pop();
// set the margin on the last meaning div.
last.style.marginBottom = comment_box_height + 'px';

.divider {
  border-bottom: 2px solid #fec303;
  margin-top: 15px;
  margin-bottom: 25px;
}

.meanings_and_examples {
  display: flex;
  flex-direction: column;
}

ol.circle {
  list-style-type: none;
}

li {
  line-height: 1.6;
}

ol.circle>li {
  counter-increment: item;
  margin-bottom: 2px;
  margin-left: 2.5em;
}

ol.circle>li::before {
  margin-right: 1em;
  margin-left: -2.7em;
  content: counter(item);
  background: #1f2c60;
  border-radius: 100%;
  color: white;
  width: 1.7em;
  text-align: center;
  display: inline-block;
}

ul {
  list-style-type: none;
  padding-bottom: 10px;
  padding-left: 2.5em;
}

.meaning {
  font-family: Tahoma, Geneva, sans-serif;
  width: auto;
  text-align: left;
  color: #1f2c60;
  text-shadow: 2px 2px 3px rgba(0, 0, 0, 0.2);
  font-size: 3vw;
  font-weight: 700;
}

.example {
  width: auto;
  text-align: left;
  font-style: italic;
  font-weight: 400;
}

.example_translated {
  width: auto;
  text-align: left;
  color: #5d78e5;
}

.comment_box {
  display: flex;
  flex-direction: column;
  width: 100%;
  position: fixed;
  bottom: 0;
  text-align: left;
  background: #fff8e5;
}

.comment_title {
  font-family: Verdana, Geneva, sans-serif;
  color: rgba(231, 237, 22, 0.58);
  margin-top: 8px;
  margin-left: 10px;
  text-shadow: 0 0 0.5em #f92504, 0 0 0.5em #f92504, 0 0 0.5em #f92504;
  font-size: 3vw;
  font-weight: 700;
}

.comment_text {
  width: auto;
  font-family: Tahoma, Geneva, sans-serif;
  color: #1f2c60;
  margin: 15px 10px 20px;
  text-shadow: none;
  font-size: 2vw;
  font-weight: 400;
}

<div class="meaning">
  <ol class="circle">
    <li>Text_1</li>
    <div class="example">
      <ul>
        <li>Example_1.1</li>
      </ul>
    </div>
    <li>Text_2</li>
    <div class="example">
      <ul>
        <li>Example_2.1</li>
        <li>Example_2.2</li>
      </ul>
    </div>
  </ol>
</div>

<div class="divider"></div>

<div class="meaning">
  <ol class="circle">
    <li>Text_1</li>
    <div class="example">
      <ul>
        <li>Example_1.1</li>
      </ul>
    </div>
    <li>Text_2</li>
    <div class="example">
      <ul>
        <li>Example_2.1</li>
      </ul>
    </div>
  </ol>
</div>

<div class="comment_box" id="comment-box">
  <div class="comment_title">ATTENTION!
  </div>
  <div class="comment_text">Comment: Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor...
  </div>
</div>

The other way, as suggested is just set a static margin to the last meaning div. To do that, you'll have to wrap them in a container so you can use the pseudo :last-child selector e.g.:

.meaning:last-child {
    margin-bottom: 120px /* or whatever height you decide */
}