How to add spaces between different tags

Question

I have some code that looks like this

<div class="topnav">
  <div>{{getGameView.Game.gameplayers[0].player.username}}</div>
  <p>VS</p>
  <div v-if="getGameView.Game.gameplayers.length > 1">
　  {{getGameView.Game.gameplayers[1].player.username}}
　</div>
  <div v-else>Waiting for opponent...</div>
</div>

Which prints this: NameVSName I am trying to make it so that between Name and VS there is some space but cannot figure out how to do it.

Answer 1

A solution is to give to the VS element a class like .vs and add some padding to it:

p {
  margin: 0;
}

.topnav {
  display: flex;
}

.topnav .vs {
  padding-right: 10px;
  padding-left: 10px;
}

<div class="topnav">
  <div>Name</div>
  <p class="vs">VS</p>
  <div>Name</div>
</div>