Как я могу разместить этот текст в этом <span>, чтобы он отображался в строке

Тег <span> отображается встроенным, а тег <div> — нет. Вы можете использовать <span> или стилизовать <div>, например:

<div style = {{display: 'inline'}}>
   // your code goes here
</div>

Ничего не меняйте в своем коде. Просто добавьте эти свойства CSS flexbox в тег привязки.

li a{
    display:flex;
    align-items:center;
    justify-content:center;
}

На самом деле это выровняет ваш текст icon и sign in точно по центру как по горизонтали, так и по вертикали.

вот рабочий пример: https://codesandbox.io/s/zen-sky-zh5tg?file=/src/App.js:0-531

Чтобы создать рабочий пример, я удалил часть логики, опубликованной в исходном коде.

код просто использует flex box:

   <li style = {{ listStyleType: "none" }}>
      <a onClick = {() => console.info("clicked")} style = {{ display: "flex", alignItems: "center" }}>
        <span className = "icon is-medium">
          <div style = {{ marginRight: 5 }}>avatar</div>
        </span>
        <div>{authUser ? <div>Dashboard</div> : <div>Sign in</div>}</div>
      </a>
    </li>