Overlap div with sidebar without move div elements/div position - html

Question

I try to develop a sidebar that opens on hover.
My problem is that when the sidebar is opened, the div with the content changes its position.
Is there any way to open and close the sidebar and keep the same placement of the text div?
DEMO
HTML
<div class="row rowSide" id="body-row">
<div [ngClass]="{'mySideBar': isSidebarCollapsed == false, 'mySideBar1': isSidebarCollapsed == true}"
(mouseenter)="hover()" (mouseleave)="hover1()" id="sidebar-container" class="sidebar-expanded d-md-block">
<ul class="list-group">
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-tasks fa-fw mr-3"></span>
<span *ngIf="isSidebarCollapsed == false" class="menu-collapsed">Tasks</span>
</div>
</a>
<a href="#" class="bg-dark list-group-item list-group-item-action">
<div class="d-flex w-100 justify-content-start align-items-center">
<span class="fa fa-calendar fa-fw mr-3"></span>
<span *ngIf="isSidebarCollapsed == false" class="menu-collapsed textCollapsed">Calendar</span>
</div>
</a>
<a href="#top" data-toggle="sidebar-colapse" (click)="collapseSidebar()"
class="bg-dark list-group-item list-group-item-action d-flex align-items-center">
<div class="d-flex w-100 justify-content-start align-items-center">
<span id="collapse-icon" class="fa fa-2x mr-3"></span>
<span *ngIf="isSidebarCollapsed == false" id="collapse-text" class="menu-collapsed textCollapsed">Collapse</span>
</div>
</a>
</ul><!-- List Group END-->
</div><!-- sidebar-container END -->
<!-- MAIN -->
<div class="col p-4">
<h1 class="display-4">Collapsing Sidebar Menu</h1>
<div class="card">
<h5 class="card-header font-weight-light">Requirements</h5>
<div class="card-body">
<ul>
<li>JQuery</li>
<li>Bootstrap 4.3</li>
<li>FontAwesome</li>
</ul>
</div>
</div>
</div><!-- Main Col END -->
</div><!-- body-row END -->
.TS
public isSidebarCollapsed;
constructor() {
this.isSidebarCollapsed = false;
}
public collapseSidebar() {
this.isSidebarCollapsed = true;
}
hover(){
this.isSidebarCollapsed = false;
}
hover1(){
this.isSidebarCollapsed = true;
}
Problem: When the sidebar is open, the text div must maintain the same placement as when the sidebar is closed.

Answer 1

You probably don't need to change position prop of sidebar. Make it always fixed and move your content div with margin like this:
#body-row {
margin-left:60px;
margin-right:0;
}
#sidebar-container {
position: fixed;
left: 0;
min-height: 100vh;
background-color: #333;
padding: 0;
}