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

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 :)