How can I make a div's width be contained between two other divs with 'space-around' spacing?

I am trying to make a div whose width will be contained between two other divs that are spaced with space-around instead of the entire width of the containing div.

I am trying to reach a design that looks like a tournament. This would be the goal:

But ending up with this:

Here is my code:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

.duel {
    display: flex;
    flex-direction: column;
}

.verticalLine {
    background-color: black;
    width: 5px;
    height: 50px;
}

.center {
    align-self: center;
}

.horizontalLine {
    background-color: black;
    width: 100%;
    height: 5px;
    align-self: center;
}

.verticalLineWrapper {
    display: flex;
    justify-content: space-around;
    width: 100%;
}

.opponent {
    width: 100px;
}

.opponets {
    display: flex;
    justify-content: space-around;
    gap: 4px;
}

<!-- language: lang-html -->

<div class="duel">
    <img class="opponent center" src="https://picsum.photos/100?asdf=1" draggable="false" />
    <div class="verticalLine center" ></div>
    <div class="horizontalLine"></div>
    <div class="verticalLineWrapper">
        <div class="verticalLine"></div>
        <div class="verticalLine"></div>
    </div>
    <div class="opponets">
        <img class="opponent" src="https://picsum.photos/100?asdf=2" draggable="false" />
        <img class="opponent" src="https://picsum.photos/100?asdf=3" draggable="false" />
    </div>
  </div>

<!-- end snippet -->

The problem is that when I set horizontalLine's width to 100% it is set to the full width of verticalLineWrapper instead of the width between its two elements.
Is there an elegant way to set the width of horizontalLine to look like in the first image?

You could use just one div with border left, right and top to draw the whole arc in one:

<div class="line-container">
  <div class="verticalLine"/>
  <div class="arc"/>
</div>

and

.line-container{
  display: flex;
  align-items: center;
  flex-direction: column;
}

.arc{
  width: 50%;
  border-width: 5px 5px 0;
  border-style: solid;
  border-color: black;
  height: 50px;
}

See how it looks in the snippet:

<!-- begin snippet: js hide: true console: false babel: false -->

<!-- language: lang-css -->

.duel {
  display: flex;
  flex-direction: column;
}

.verticalLine {
  background-color: black;
  width: 5px;
  height: 50px;
}

.center {
  align-self: center;
}


.opponent {
  width: 100px;
}

.opponets {
  display: flex;
  justify-content: space-around;
  gap: 4px;
}

.line-container {
  display: flex;
  align-items: center;
  flex-direction: column;
}

.arc {
  width: 50%;
  border-width: 5px 5px 0;
  border-style: solid;
  border-color: black;
  height: 50px;
}

<!-- language: lang-html -->

<div class="duel">
  <img class="opponent center" src="https://robohash.org/player1" />

  <div class="line-container">
    <div class="verticalLine"></div>
    <div class="arc"></div>
  </div>
  
  <div class="opponets">
    <img class="opponent" src="https://robohash.org/player2" />
    <img class="opponent" src="https://robohash.org/player1" />
  </div>
</div>

<!-- end snippet -->