How to make a vertical timeline with HTML, CSS, and Flex

Question

I am making a vertical timeline with HTML and CSS. My idea is to use a CSS border for each step. I am using "border-right" for one step and "border-left" for the next step. In theory, wouldn't this make the line perfectly in the middle? But, the line is not in the middle. The line looks broken. This is where I need help. Can you please look at my CSS/HTML and help center the middle line perfectly? I would like to make this a template, so I can copy and paste each step forever, if needed.

I need help getting the center black line to align to center for all of the steps. What am I doing wrong?

.step {
  display: flex;
}

.img-left,
.img-right {
  padding: 30px;
}

.info-right,
.info-left {
  padding: 30px;
}

.info-right {
  border-left: 1px black solid;
}

.info-left {
  border-right: 1px black solid;
}

<div class="timeline-holder">
  <h1>Timeline</h1>
  <div class="step">
    <div class="img-left">
      <img src="https://via.placeholder.com/150" />
    </div>
    <div class="info-right">
      <h2>Placeholder Title</h2>
      <p>Placeholder text. Placeholder text. Placeholder text. Placeholder text. Placeholder text.</p>
      <ul>
        <li>Placeholder text</li>
        <li>Placeholder text</li>
      </ul>
    </div>
  </div>
  <div class="step">
    <div class="info-left">
      <h2>Placeholder Title</h2>
      <p>Placeholder text. Placeholder text. Placeholder text. Placeholder text. Placeholder text.</p>
      <ul>
        <li>Placeholder text</li>
        <li>Placeholder text</li>
      </ul>
    </div>
    <!-- end .info-left -->
    <div class="img-right">
      <img src="https://via.placeholder.com/150" />
    </div>
  </div>
</div>

View on CodePen.

Answer 1

A flex item will grow or shrink to fit the space available in its flex container. You have to take control over that behaviour with the flex CSS property. Also give your images a max-width.

.step {
    display: flex;
}

.step img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 0 auto;
}

.step h2 {
  margin-top: 0;
}

.step__left, .step__right {
    padding:30px;
    flex: 0 0 200px;
}

.step__right {
    border-left:1px black solid;
    background-color: rgba(0,255,0,0.1);
}

.step__left {
    border-right:1px black solid;
    background-color: rgba(255,0,0,0.1);
}

<div class="timeline-holder">
    <h1>Timeline</h1>
        <div class="step">
            <div class="step__left">
                <img src="https://via.placeholder.com/150"/>
            </div>
            <div class="step__right">
                <h2>Placeholder Title</h2>
                <p>Placeholder text. Placeholder text. Placeholder text. Placeholder text. Placeholder text.</p>
                <ul>
                    <li>Placeholder text</li>
                    <li>Placeholder text</li>
                </ul>
            </div>
        </div>
        <div class="step">
            <div class="step__left">
                <h2>Placeholder Title</h2>
                <p>Placeholder text. Placeholder text. Placeholder text. Placeholder text. Placeholder text.</p>
                <ul>
                    <li>Placeholder text</li>
                    <li>Placeholder text</li>
                </ul>
            </div>
            <div class="step__right">
                <img src="https://via.placeholder.com/150"/>
            </div>
        </div>
</div>

Answer 2

.img-left, .img-right {
    padding:30px;
    flex:1;
}
.info-right,.info-left {
    padding:30px;
    flex:1;
} 

+Add "flex:1;" to make them equal widths.