In the HTML structure I have provided below, you can see that there is a nested row inside another row, and within that inner row, there are two more columns (trying to split col-9 into more columns).
However, the issue is that instead of appearing next to each other, the inside columns are displayed underneath one another, both acting as if they are col 12 in the row and occupying the entire 100% of that col-9.
(I am attempting to place an input field and a button on the same line)
Thank you in advance
UPDATE: No, haha, I did not forget about the class attributes and their functionality. While typing the code here for the question, I just omitted them. The focus is on the structure of my code. If necessary, I can copy and paste the precise code, but it's quite lengthy.
UPDATE CODE HERE:
<div class="container">
<div class="row">
<!-- ####################################################### NAV BAR ###########################################################-->
<div class="col col-md-3">
<ul class="nav nav-pills nav-stacked admin-menu">
<li class="nav-item"><a class="nav-link active" id="home-tab" data-toggle="tab" onclick="openContent(event, 'home')" role="tab" aria-controls="home" aria-selected="true"><i class="fa fa-home fa-fw"></i>Home</a></li>
<li class="nav-item"><a class="nav-link active" id="profile-tab" data-toggle="tab" onclick="openContent(event, 'profile')" role="tab" aria-controls="profile" aria-selected="false"><i class="fa fa-list-alt fa-fw"></i>Profile</a></li>
<?php if ($super_admin == 1) echo '<li class="nav-item"><a class="nav-link active" id="addstaff-tab" data-toggle="tab" onclick="openContent(event, \'add_staff\')" role="tab" aria-controls="add_staff" aria-selected="false"><i class="fa fa-cogs fa-fw"></i>Add Staff Member</a></li>'?>
<li class="nav-item"><a class="nav-link active" id="settings-tab" data-toggle="tab" onclick="openContent(event, 'settings')" role="tab" aria-controls="settings" aria-selected="false"><i class="fa fa-cogs fa-fw"></i>Settings</a></li>
<li class="nav-item"><a href="logout.php" data-target-id="Logout"><i class="fa fa-cogs fa-fw"></i>Log Out</a></li>
</ul>
</div>
<!-- END OF NAVBAR -->
<div class="tab-content col-md-9 well admin-content">
<!-- ######################################################3################# HOME CONTENT ########################################################################################-->
<div id="home" class="tab_content">
<?php echo "<h1>Welcome " . $_SESSION['firstName'] . "!</h1>"?>
<div class="search">
<form action="">
<input type="text" id="participant" placeholder="Search for participant" onkeyup="showHint(this.value)">
</form>
<p>Suggestions: <span id="txtHint"></span></p>
<script>
// JavaScript Function
</script>
<div class="col col-2"></div>
<div class="col col-8 table_div"><table class="table">
<?php
// PHP Script
?>
</div>
</div>
</div>
<!-- ######################################################3################# PROFILE CONTENT ########################################################################################-->
<div id="profile" class="tab_content">
<h3>Profile</h3>
</div>
<!-- ######################################################3################# ADD STAFF CONTENT ########################################################################################-->
<div id="add_staff" class="tab_content">
<h3>Add Staff Member</h3>
<p>Enter Staff ID Number to be added to the System.</p>
</div>
<!-- ######################################################3################# Settings CONTENT ########################################################################################-->
<div id="settings" class="tab_content">
<h3>Settings</h3>
</div>
</div>
</div>