CSS line words line where the line fills the available space?

Question

I would like to create a dynamic divider for a page which will allow for a word or 2 in the center. Left and right of the divide there would be a line reaching out to the extents of the container.

I have a kind of version working but it is very rigid to the content in the "word container":

.divider {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  text-align: center;
  margin: 20px 0;
}
  
.divider span:first-child,
.divider span:last-child{
    border-bottom: solid 1px;
    width: 20%;
}

.divider span:nth-child(2){
  margin-right: 5px;
  margin-left: 5px;
}

<div class="divider">
    <span></span>    
    <span>or continue with</span>    
    <span></span>
</div>

The problem is the horizontal lines in the snippet do not extend to the edge of the container as they are fixed to 20%.. but if i change the 20% there is a change the number of words in the middle span will cause issues...

How can the 1st and last span fill the rest of the remaining space left and right of the words in an elastic manner?