bootstrap 5 navbar in 2 rows - html

Question

I'm trying to create this navbar design, but I also want to maintain the responsiveness, hamburger menu but only for the upper part (home, contact us, etc links)
.red {
background-color: red;
width: 100px;
height: 100px;
}
.blue {
background-color: blue;
width: 100px;
height: 100px;
}
.yellow {
background-color: yellow;
width: 100px;
height: 100px;
}
.orange {
background-color: orange;
width: 50px;
height: 50px;
border: 2px solid black;
}
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/js/bootstrap.bundle.min.js"></script>
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.2.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg bg-black">
<div class="container-fluid">
<a class="navbar-brand" href="#">
<div class="red">a</div>
</a>
<button class="navbar-toggler ms-auto" type="button" data-bs-toggle="collapse" data-bs-target="#navbarSupportedContent" aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation">
<span class="navbar-menu">
<div class="yellow"></div>
</span>
</button>
<div class="container">
<div class="row">
<div class="collapse navbar-collapse" id="navbarSupportedContent">
<ul class="navbar-nav me-auto mb-2 mb-lg-0">
<li class="nav-item">
<a class="nav-link active text-white active-page fs-2" aria-current="page" href="#">Home</a>
</li>
<li class="nav-item">
<a class="nav-link text-white fs-2" href="#">Rooms</a>
</li>
<li class="nav-item">
<a class="nav-link text-white fs-2" href="#">Team</a>
</li>
<li class="nav-item">
<a class="nav-link text-white fs-2" href="#">Info</a>
</li>
<li class="nav-item">
<a class="nav-link text-white fs-2" href="#">Contact us</a>
</li>
</ul>
</div>
</div>
<div class="d-none d-lg-block bg-white p-3">
<!-- Have to make like this, if i put everything in a single div it brakes -->
<div class="row justify-content-md-center">
<div class="col-3 d-flex align-items-center">
<span class="font-SansSerifBldFLFCond text-blue">CALL US NOW</span>
<div class="orange">s</div>
</div>
<div class="col-3 d-flex align-items-center">
<p class="text-blue">From</p>
<div id="today-date ">
<h4 class="fs-6 text-blue">SUNDAY</h4>
<p class="fs-3">15 May</p>
</div>
<div class="orange">s</div>
</div>
<div class="col-3 d-flex align-items-center">
<p class="text-blue">To</p>
<div id="tomorrow-date">
<h4 class="fs-6 text-blue">MONDAY</h4>
<p class="fs-3">16 May</p>
</div>
<div class="orange">s</div>
</div>
<div class="col-3 d-flex align-items-center">
<p class="text-blue font-SansSerifBldFLFCond">INFO</p>
</div>
</div>
</div>
</div>
</div>
</nav>
First main problem is I want to center the links (home, about info)
Second, I want to remove all the padding and margin so the icon (red div) have the same height of the Navbar.
And final thing The height of the 2 columns (links and calendar, phone ecc) should be 50% of the logo each, so combined they have the same height of the logo