How to make two items appear next to eachother in an xs viewport with bootstrap

Before I start I want to say I'm a beginner so I apologize for my messy code.

I'm still working on this so the styling is a little messy, but I'm trying to get my name (Tristen Roth) and the navbar-toggler-icon to appear next to each other on xs viewports. Currently, it puts them on two separate rows/lines vertically in the viewport. This leaves a lot of unattractive whitespaces to the right of the toggler icon and to both sides of my name.

Ideally, I want the name to appear next to the icon on the same line on xs viewports so it gets rid of the whitespace.

I've tried a bunch of things and some worked but they messed up the formatting on viewports over xs so it defeats the purpose.

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.row-content {
padding-bottom: 10px;
border-bottom: 1px ridge;
}
header {
margin: 2%;
}
.navbar {
margin: 0;
}

<!-- language: lang-html -->

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap@4.6.2/dist/css/bootstrap.min.css" integrity="sha384-xOolHFLEh07PJGoPkLv1IbcEPTNtaed2xpHsD9ESMhqIYd0nLMwNLD69Npy4HI+N" crossorigin="anonymous">
<header>
<div class="container-fluid">
<div class="row row-content">
<div class="col-xs-3 col-md-4 col-xl-4" id="fullnavelement">
<nav class="navbar navbar-expand-md navbar-light" id="navelement">
<div class="container pl-0  d-inline-flex" id="navcontainer">
<button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarNavAltMarkup">
<span class="navbar-toggler-icon"></span>
</button>
<div class="collapse navbar-collapse" id="navbarNavAltMarkup">
<div class="navbar-nav" id="navbar-links-custom">
<a class="nav-link active" aria-current="page" href="#">Home</a>
<a class="nav-link px-sm-2 px-md-3 px-lg-4 px-xl-5" href="about.html">About</a>
<a class="nav-link" href="portfolio.html">Portfolio</a>
</div>
</div>
</div>
</nav>
</div>
<div class="col-xs-9 col-md-4 col-xl-4 align-self-center" id="nameobject">
<h1 class="text-center text-nowrap">Tristen Roth</h1>
<div class="d-none d-lg-block">
<h5 class="text-center text-nowrap">Web Designer & Web Developer</h5>
</div>
</div>
<div class="col-md-4 col-xl-4 mt-4 d-none d-md-block">
<a class="btn btn-info text-nowrap" role="button">Contact Me</a>
</div>
</div>
</div>
</header>

<!-- end snippet -->

I just removed the xs from the col-xs-{n} classes and it worked:

	<header>
<div class="container-fluid">
<div class="row row-content">
<div class="col-3 col-md-4 col-xl-4" id="fullnavelement">
<!--Content-->
</div>
<!--TODO change font-->
<div
class="col-9 col-md-4 col-xl-4 align-self-center"
id="nameobject">
<!--Content-->
</div>
</div>
</div>
</header>

look at this table to get an idea: https://getbootstrap.com/docs/4.5/layout/grid/#grid-options