absolute child same width as column container - html

Question

I'm creating my own dropdown search bar that displays results when a user types some text.
The problem is that the result list div has to be position: absolute. This leads it to ignoring the parent col container width. How do I get results list to fit within the width of the col?
.player-search-list {
z-index: 2;
background-color: white;
position: absolute;
width: 100%;
}
<div class="row">
<div class="col-6">
<!-- some other content -->
</div>
<div class="col-6">
<div class="top-buffer">
<!-- Relative search bar that expands to bootstrap col -->
<div class="player-search-bar input-group rounded-bottom-0">
<!-- search functionality-->
</div>
</div>
<!-- ***ABSOLUTE drop down*** that doesnt fit inside bootstrap col -->
<div class="list-group player-search-list" id="playerSearch">
<div *ngFor="let result of results | slice:0:9">
<!-- drop down results list functionality -->
</div>
</div>
</div>
</div>

Answer 1

I used:
.player-search-list{
z-index: 2;
background-color: white;
position: absolute;
width: 100%;
left: 0;
padding-left: 15px;
padding-right: 15px;
}
The left is to center the div inside the container. The padding-left and padding-right is the same amount of the col container. This keeps the divs in the same position and size of the search bar.

Answer 2

In Case somebody stumbles on this question and is still looking for the result:
Your Parent DIV (in this case .col-6) must be position:relative.
The width of the search results must be set to 100%!
parent_container {
position: relative;
}
search_results {
position: absolute;
width: 100%
}