How to overlay div with search suggestions using vue 3 boostrap

I am currently trying to build a small search box with matching suggestions using the vue 3 boostrap library. I want the suggestions box to overlay the following div on the z-axis instead of pushing it down. I have already tried to work with the z-index, but without success.

Here I have the code example in a codepen: https://codepen.io/vue_novice/pen/wvxbyMQ

<div id='app'>
  <b-container fluid>
    <b-row align-h="center">
      <b-col cols="4">
        <h1 class="text-center mt-4 mb-4">My Search</h1>
        <b-input-group size="lg">
          <b-form-input placeholder="Type Something"></b-form-input>
          <b-input-group-append>
            <b-button variant="primary">🔍</b-button>
          </b-input-group-append>
        </b-input-group>

        <b-list-group>
          <b-list-group-item>Suggestion 1</b-list-group-item>
          <b-list-group-item>Suggestion 2</b-list-group-item>
          <b-list-group-item>Suggestion 3</b-list-group-item>
          <b-list-group-item>Suggestion 4</b-list-group-item>
        </b-list-group>
      </b-col>
    </b-row>

    <b-row align-h="center">
      <b-col cols="6">
        <h1>I want to be hidden behind the Suggestions 😊</h1>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
        <p>Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet. Lorem ipsum dolor sit amet, consetetur sadipscing elitr, sed diam nonumy eirmod tempor invidunt ut labore et dolore magna aliquyam erat, sed diam voluptua. At vero eos et accusam et justo duo dolores et ea rebum. Stet clita kasd gubergren, no sea takimata sanctus est Lorem ipsum dolor sit amet.</p>
      </b-col>
    </b-row>

  </b-container>

</div>

How do I adjust the code so that my suggestion box under the search overlays my text below on the z-axis?

Solution

It needs to be positioned absolutely, the list group.

add this css to the .list-group

.list-group {
  position: absolute;
  left: 15px;
  right: 15px;
  z-index: 1
}