How to make horizontal lines sit beside circle bullets using CSS

Question

I'm trying to accomplish the below using CSS:

Ideally, the length of the lines should depend on the number of circles (i.e. it should be longer if it's less than five, shorter if more than, and so on).

I tried to do this using the following code:

HTML:

<div class="ng-modal-number-container">
   <div class="questionNumbers" ng-repeat="item in numberOfQuestions">
        <div class="questionNumberIcon">{{item}}</div><div class="questionNumberLine"></div>
   </div>
</div>

CSS:

.ng-modal-number-container {
    height:78px;
    background-color:#f5f5f5;
    width:auto;
    display:flex;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: center;
    justify-content: center;
}

.questionNumbers {
    display:inline;
}

.questionNumberIcon {
    display:inline-block;
    width:45px;
    height:45px;
    border-radius:23px;
    font-size:18px;
    color:#000;
    line-height:45px;
    text-align:center;
    background:#fff;
    border:2px solid black;
 }

.questionNumberLine {
    border-top:1px solid black;
    display:inline-block;
}

However, what I got was this:

I'm sure there's something wrong with my CSS, I just don't know what. Hopefully you guys can point it out for me.

Any advice would be very much appreciated, as always.

Thank you.

UPDATE 1: As z0mB13 advised, I changed my ng-modal-number-container's justify content to the following:

.ng-modal-number-container {
    height:78px;
    background-color:#f5f5f5;
    width:auto;
    display:flex;
    display: -webkit-flex;
    -webkit-flex-direction: row;
    flex-direction: row;
    -webkit-align-items: center;
    align-items: center;
    -webkit-justify-content: space-around;
    justify-content: space-around;
}

I also added width:100px to .questionNumberLine, so this is how it looks like now:

Just a few more tweaks and I can adjust the location of the lines, however, is it possible to make the width of the line dynamic? I want it to be longer if there are fewer circles, and vice versa.

Thanks!

UPDATE 2 (Answer): Finally solved this thanks to thepio's tips. I'm posting my solution here in case somebody else encounters the same problem in the future.

Thanks thepio!

HTML:

<div class="question-content-wrapper">
    <div class="ng-modal-number-container">
        <div class="questionNumbers" ng-repeat="item in numberOfQuestions">
            <div class="questionNumberIcon">{{item}}</div>
        </div>
    </div>
</div>

CSS:

.ng-modal-number-container {    
    margin-top: 22px;
    background-color:#f5f5f5;
    border-top: 1px solid black;
    width:auto;
    display:flex;
    display: -webkit-flex;
    justify-content: space-between;
    -webkit-justify-content: space-between;
}

.questionNumbers {
    margin-top:-23px;
}

.questionNumberIcon {
    width:45px;
    height:45px;
    border-radius:50%;
    font-size:18px;
    color:#000;
    line-height:42px;
    text-align:center;
    background:#fff;
    border:1px solid black;
}

.question-content-wrapper {
    position:relative;
    background-color:#f5f5f5;
    height:78px;    
    padding-left:20px;
    padding-right:20px;
    padding-top:16px;
}

What it looks like now:

Answer 1

Here's a little example of one possibility how you could achieve something like you want. Sorry for not implementing it into your given code but you should be easily able to do it yourself.

body {
  margin: 50px 20px;
}

.container {
  width: 100%;
  display: flex;
  justify-content: space-between;
  border-top: 2px solid black;
  padding-top: 15px;
  margin-top: 15px;
}

.container div {
  background-color: #ffffff;
  font-weight: bold;
  border: 2px solid black;
  margin-top: -40px;
  width: 45px;
  height: 45px;
  line-height: 45px;
  text-align: center;
  border-radius: 50%;
}

<div class="container">
  <div>1</div>
  <div>2</div>
  <div>3</div>
  <div>4</div>
</div>

EDIT:

A fiddle with your html structure: https://jsfiddle.net/thepio/0opv207p/