Align two div's and hr tag for step progress bar

Question

I have following progress bar

1. I want the 'created', 'assigned' div's below circle and centred at the same time 'hr' line should touch the circle. Should work for varying screen sizes
2. How to make perfect circle here?

HTML

<div class="container">
    <div   class="progress">

        <div id='content' class='filledCircle'></div>
          <div>Created</div>
            <hr class="line">
        <div id='content' class='filledCircle'></div>
          <div>Assigned</div>

    </div> 
</div> 

CSS

.container{
 position: relative;
 border: 3px solid mistyrose;
 margin-left: 50%;

}

.progress{
 display: flex;
}

hr.line{
 border: none;
 background: grey;
 width: 100%;
 height: 2px;
}

.filledCircle{
 height: 25px;
 width: 25px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
}

Thanks in advance :)

Answer 1

For making a better circle you can use Padding

.container{
 position: relative;
 border: 3px solid mistyrose;
 margin-left: 50%;

}

.progress{
 display: flex;
 align-items:center
}

hr.line{
 border: none;
 background: grey;
 width: 100%;
 height: 2px;
}

.filledCircle{
padding:15px;
 background-color: #bbb;
 border-radius: 50%;
 display: inline-block;
}

<div class="container">
    <div   class="progress">

        <div id='content' class='filledCircle'></div>
          <div>Created</div>
            <hr class="line">
        <div id='content' class='filledCircle'></div>
          <div>Assigned</div>

    </div> 
</div> 

Just use align-items: center in your CSS file and use padding instead of width and height

.progress {
   display: flex;
   align-items: center;
}

    .filledCircle {
      padding: 15px;
      background-color: #bbb;
      border-radius: 50%;
      display: inline-block;
    }