Position text before and after a hyphen aligned to the center

Question

I have two information, an email and a number ( phone ), between the two put a hyphen. I want to center the hyphen in the middle of the screen and put the email on the left side of that hyphen and the number on the right side. Someone can help me how to do this, I’ve tried a lot, and it never gets aligned right. I’m using the Vue CLI + Vue Router

HTML

<template>
  <div class="container">
    <h1>Leads</h1>

    <div class="leads">
      <div v-for="lead in leads" :key="lead.id" class="lead">
        <h2>{{ lead.nome }}</h2>
        <div class="lead-contact">
          <span id="first">{{ lead.email }}</span>
          <b>-</b>
          <span>{{ lead.telefone }}</span>
        </div>
        ...

CSS

.container h1 {
  text-align: center;
  font-size: 26pt;
}

.leads {
  display: flex;
  flex-direction: column;

  margin-top: 70px;
  align-items: center;
}

.lead {
  width: 90%;
  max-width: 700px;

  position: relative;
  display: block;
}

.lead h2 {
  text-align: center;
  letter-spacing: 1px;
  color: #9e00ff;
}

To be clear, I wanted to do something like this:

Answer 1

In class .lead-contact you put display flex, and in the spans that are inside put flex: 1 and aligns with text-align

.container h1 {
  text-align: center;
  font-size: 26pt;
}

.leads {
  display: flex;
  flex-direction: column;

  margin-top: 70px;
  align-items: center;
}

.lead {
  width: 90%;
  max-width: 700px;

  position: relative;
  display: block;
}

.lead h2 {
  text-align: center;
  letter-spacing: 1px;
  color: #9e00ff;
}

.lead-contact {
  display: flex;
}
.lead-contact span {
  flex: 1;
}
.lead-contact b {
  margin: 0 10px;
}
#first {
  text-align: right;
}

<div class="container">
  <h1>Leads</h1>

  <div class="leads">
    <div v-for="lead in leads" :key="lead.id" class="lead">
      <h2>{{ lead.nome }}</h2>
      <div class="lead-contact">
        <span id="first">{{ lead.email }}</span>
        <b>-</b>
        <span>{{ lead.telefone }}</span>
      </div>
      <div class="lead-contact">
        <span id="first">123</span>
        <b>-</b>
        <span>123123 123 12 3123 12 213 </span>
      </div>
      <div class="lead-contact">
        <span id="first">abcfsdsdf sdfsdfsd werew werwe</span>
        <b>-</b>
        <span>sfdfsdfs sdfds</span>
      </div>
    </div>
  </div>
</div>