CSS: top bar aligned

Question

I need the h6 "BI" stand next to mine span menu, but with considerable spacing. I tried to do with div and li, but anyway, "BI" ends up below the span.

.topnav {
  background-color: #111;
  overflow: hidden;
}

#spanOpen {
  cursor: pointer;
  font-size: 30px;
  color: #f1f1f1;
}

#bi {
  color: #f1f1f1;
  font-size: 30px;
}

<div id="topBar" class="topnav">
  <ul>
    <li>
      <span id="spanOpen" v-on:click="openMenu">&#9776;</span>
      <h5 id="bi"> BI</h5>
    </li>
  </ul>
</div>

Answer 1

Put it in #Bi:

display:inline-block;
margin-left: 20px; //margi de acordo com o que desejar

Fiddle: https://jsfiddle.net/atjLfhpg/