Aligning a single item to the right of a navbar-CodePudding

I have a header component with a

tag and navbar inside of it. I want the navbar collapsible button on the left and the

tag on the far right. What would be the best way of accomplishing this. Any help would be greatly appreciated.

.header {
  background: transparent;
  color: white;
  font-size: 40px;
  width: 100%;
  font-family: 'Cormorant Garamond', serif;
  position: absolute;
  display: flex;
}

<div >
  <app-navbar></app-navbar>
  <div >
    <p>N</p>
  </div>
</div>

<div  id="navbarToggleExternalContent">
  <div >
    <h5 >Collapsed content</h5>
    <span >Toggleable via the navbar brand.</span>
  </div>
</div>
<nav >
  <div >
    <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarToggleExternalContent" aria-controls="navbarToggleExternalContent" aria-expanded="false" aria-label="Toggle navigation">
          <span ></span>
        </button>
  </div>
</nav>

CodePudding user response：

Here is a simple example with the tag on the right and the icon on the left. I hope this helps.

<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>Document</title>
  <link href="https://cdn.jsdelivr.net/npm/[email protected]/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
  <link rel="stylesheet" href="index.css">
</head>

<body>
  
  <nav  aria-label="First navbar example">
    <div >
      <button  type="button" data-bs-toggle="collapse" data-bs-target="#navbarsExample01" aria-controls="navbarsExample01" aria-expanded="false" aria-label="Toggle navigation">
        <span ></span>
      </button>
      <a  href="#">Never expand</a>

      <div  id="navbarsExample01">
        <ul >
          <li >
            <a  aria-current="page" href="#">Home</a>
          </li>
          <li >
            <a  href="#">Link</a>
          </li>
          <li >
            <a >Disabled</a>
          </li>
          <li >
            <a  href="#" id="dropdown01" data-bs-toggle="dropdown" aria-expanded="false">Dropdown</a>
            <ul  aria-labelledby="dropdown01">
              <li><a  href="#">Action</a></li>
              <li><a  href="#">Another action</a></li>
              <li><a  href="#">Something else here</a></li>
            </ul>
          </li>
        </ul>
        <form>
          <input  type="text" placeholder="Search" aria-label="Search">
        </form>
      </div>
    </div>
  </nav>
  
  <script src="https://cdn.jsdelivr.net/npm/[email protected]/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg OMhuP IlRH9sENBO0LRn5q 8nbTov4 1p" crossorigin="anonymous"></script>

</body>

</html>