how to make my content area to the right of my menu?

Question

Hello im trying to put my content area to the right of my vertical nav bar using bootstrap 4. in my current code the content area is under the menu. any suggestions on how to fix it so its next to the menu on the right side. Thank you

 <div class="container-fluid">
 <div class="col-3">

 <nav class="navbar navbar-expand-sm bg-dark navbar-dark">
 <button class="navbar-toggler" type="button" data-toggle="collapse" data- 
 target="#collapsibleNavbar" aria-expanded="true">
 <span class="navbar-toggler-icon"></span>
 </button>
 <div class="navbar-collapse collapse show" id="collapsibleNavbar" style>
 <ul class="navbar.flex-column">
 <li class="nav-item">
 <a class="nav-link" href="index.html">Index</a>
 </li>

 </ul>
 </div>
 </nav>
 </div>
 </div>

 <div class="container-fluid">
 <div class="col-9">

 <p>Main Content area</p>

 </div>
 </div>