I have a navigation bar that will expand when the mouse is over it. I wish to display heading text once it is expanded (currently shows icons), I have used `display: none` on the heading tag, which then toggles to `display: inline-block` when the `:hover` event is active on the navbar. However, upon expansion of the navbar the text renders in on two lines before positioning itself into one which I want. I want to get rid of this and have the text render in as one line only while the navbar expands. My code:

```
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <title>Navigation Bar</title>
    <link href="css/styles.css" rel="stylesheet" type="text/css" />
    <script
      src="https://kit.fontawesome.com/6cc49d804e.js"
      crossorigin="anonymous"
    ></script>
  </head>

  <body>
    <div id="sidenav">
      <div id="sidenav-brand">
        <div id="sidenav-heading">
          <h2>Expanded Test</h2>
        </div>
        <div id="sidenav-expand">
          <i id="expand-icon" class="fas fa-angle-double-right fa-2x"></i>
        </div>
      </div>

      <div id="sidenav-links">
        <ul id="links">
          <li>
            <i class="fas fa-fw fa-id-card fa-2x"></i>
          </li>
          <li>
            <i class="fas fa-fw fa-graduation-cap fa-2x"></i>
          </li>
          <li>
            <i class="fas fa-fw fa-briefcase fa-2x"></i>
          </li>
          <li>
            <i class="fas fa-fw fa-smile-beam fa-2x"></i>
          </li>
        </ul>
      </div>
    </div>
  </body>
</html>

```

```
body {
}

/* Make the width full-size then use javascript to minimise so content fits */
#sidenav {
  height: 100%;
  width: 75px;
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  background-color: #1e1e2d;
  overflow-x: hidden;
  color: grey;
  transition: width 0.5s;
}

#sidenav-brand {
  padding: 25px 20px;
  background-color: #1a1a27;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: center;
}

#sidenav-heading {
  display: none;
}

#sidenav-heading h2 {
  margin: 0;
  color: white;
}

#sidenav-expand {
  text-align: center;
  margin-left: 3px;
}

#expand-icon {
  transition: transform 0.5s;
}

#sidenav:hover {
  width: 280px;
}

#sidenav:hover #expand-icon {
  transform: rotate(180deg);
}

#sidenav:hover #sidenav-heading {
  display: inline-block;
}

#sidenav-links {
  margin: 15px 0;
}

#links {
  list-style-type: none;
  padding: 0;
  text-align: left;
}

#links li {
  padding: 18px;
  display: block;
}

#links li:hover {
  color: white;
  background-color: hotpink;
}

.fas {
  vertical-align: middle;
}

```

Please check this fiddle for what I mean when the navbar expands:
<https://jsfiddle.net/4pk25oLh/>

P.S. The effect I want is the same as when you get rid of the space in the heading text (however, I will need the space). Any help would be greatly appreciated.