Embedded flex rows challenge

For part of a recent coding challenge I had to create this component:

I initially tried to create one container with display: flex; for the gray dots with blue centers as well as the gray lines. However this approach quickly ran into trouble when I tried to include the text beneath each gray dot. I wasn’t able to simultaneously center the text under its respective dot and maintain the gray lines centered.

Additionally, if I made the div tags containing the gray lines at the same level as their gray dots, then the irregular widths of the text boxes would impact the uniformity of the gray lines.

After some tinkering I hit upon integrating two flex containers.

The child container would include the embedded dots and their accompanying text, using flex-direction: column;. Each one looked like this:

<div class="dot-item-wrapper">
  <div class="gray-dot">
    <div class="blue-dot"></div>
  </div>
  <span class="why-text">Lorem ipsum</span>
</div>

.dot-item-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 15px;
  width: fit-content;

  border: 1px solid black;
}

.dots-wrapper .gray-dot {
  height: 40px;
  width: 40px;
  background-color: #d5deea85;
  border-radius: 50%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.dots-wrapper .blue-dot {
  height: 5px;
  width: 5px;
  background-color: #2476fe;
  border-radius: 50%;
}
.why-text {
  width: 160px;
  text-align: center;
}

Then those four dot cards were wrapped inside another div this time using display: flex; and flex-direction: row;.

.dots-wrapper {
  width: 70%;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  justify-content: center;
  gap: 3px;
}

Next I added gray lines in between each <div class="dot-item-wrapper"> like so:

However, as you can see, there are two problems:

1. The lines are not on the same plane as the embedded blue dots
2. The line lengths (while responsive) are restricted in between the text content boxes

To fix the height issue, I used half the height of the gray dot as the value for the gray line’s margin-top. Then, to address the length, I used negative margins to the right and left of the gray lines so that they overflowed the text content boxes.

<div class="dot-item-wrapper">
  <div class="gray-dot">
    <div class="blue-dot"></div>
  </div>
  <span class="why-text">Lorem ipsum</span>
</div>

<div class="gray-line"></div>

.gray-line {
  border-top: 2px solid #d5deea85;
  width: 100%;
  margin-top: 20px;
  margin-left: -59px;
  margin-right: -59px;
}

Thus, the final result: