连接线在中间css

Question

我有3个宽度相同的图像和1个宽度略大的图像，我希望将这些图像连续显示，并且在这些图像之间有一条连接线在中间水平，其中一条连接线将有不同的颜色，大致如下：

我到目前为止所做的是使用<hr>作为连接线，但看起来不够好看，连接线在中间不对齐垂直，当我试图增加下面的字体大小时每个图像将使2行字体不是1。

<style> 
.rank-images .image-container{
    width: 14%;
    display: inline-block;
  }
  .rank-images .image-container.rank-3{
    width: 18%;
  }
  div.seperator{
    display: inline-block;
    width: 12%;
  }
  div.seperator hr{
    border-bottom: 3px solid #F7D85A;
  }
  div.seperator.third-seperator hr{
    border-bottom: 3px solid #333;
  }
  .rank-images .image-container p{
    margin-top: 15px;
    text-align: center;
  }
  .rank-images .image-container p span{
    font-weight: bold;
    font-size: 0.73em;
    color: #333;
  }
</style>

          <div class="rank-images">
            <div class="image-container rank-1">
              <img class="rank-image" src="https://cdn.pixabay.com/photo/2016/02/19/15/34/orange-1210523_960_720.png" />
              <p>
                <span>Less than 2000 points</span>
              </p>
            </div>
            <div class="seperator first-seperator">
              <hr>
            </div>
            <div class="image-container rank-2">
              <img class="rank-image" src="https://cdn.pixabay.com/photo/2016/02/19/15/34/orange-1210523_960_720.png" />
              <p>
                <span>2001 - 5000 points</span>
              </p>
            </div>
            <div class="seperator second-seperator">
              <hr>
            </div>
            <div class="image-container rank-3">
              <img class="rank-image" src="https://cdn.pixabay.com/photo/2016/02/19/15/34/orange-1210523_960_720.png" />
              <p>
                <span>5001 - 12000 points</span>
              </p>
            </div>
            <div class="seperator third-seperator">
              <hr>
            </div>
            <div class="image-container rank-4">
              <img class="rank-image" src="https://cdn.pixabay.com/photo/2016/02/19/15/34/orange-1210523_960_720.png" />
              <p>
                <span>More than 12000 points</span>
              </p>
            </div>
          </div>