Trouble vertically aligning divs in list

Question

I am relatively new to css, sorry if this is real simple. I have been looking for a solution for more than an hour and cant seem to figure it out. I would like to vertically align timeline-panel and timeline-image. Note that h4 can have multiple lines, thus changing the height of timeline-panel.

Thanks edit

I think I didnt explain myself correctly. Here is the page I am building. You can see it here on the about section. http://belyza.com/test437/ I added a top margin to the text for now, but that does not work with responsive theme when the text become multiple lines on smaller screens.

.timeline {
  list-style: none;
  padding: 0;
  position: relative
}
.timeline>li {
  margin-bottom: 10px;
  position: relative;
  min-height: 50px
}

.timeline>li .timeline-panel {
  position: relative;
  text-align: center;
}

.timeline>li .timeline-image {
  left: 50%;
  margin-left: 15px;
  width: 50px;
  height: 50px;
  position: absolute;
  z-index: 100;
  background-color: #E80B10;
  color: #fff;
  border-radius: 100%;
  border: 5px solid #ff9600;
  text-align: center
}

.timeline>li .timeline-image h4 {
  font-size: 10px;
  margin-top: 12px;
  line-height: 14px
}

.timeline .timeline-heading h4 {
  margin-top: 0;
  color: inherit
}

.timeline .timeline-heading h4.subheading {
  text-transform: none
}

.timeline .timeline-body>p,
.timeline .timeline-body>ul {
  margin-bottom: 0
}

<ul class="timeline">
  <li>
  
    <div class="timeline-image">
    </div>
    <div class="timeline-panel">
      <div class="timeline-heading">
        <h4>test</h4>
      </div>
    </div>
  </li>
</ul>

Answer 1

If you want to use flexbox you could set it up like this:

EDIT

Ok, so now that I see exactly what you are trying to do I've edited the code, I think this is what you're looking for.

.timeline {
  list-style: none;
  padding: 0;
}
.timeline>li {
  align-items: center;
  display: flex;
  justify-content: center;
  margin-bottom: 10px;
  min-height: 50px
}

.timeline-panel-left:after,
.timeline-panel-right:before {
  content: "";
  flex: 1 calc(50% - 80px);
  max-width: calc(50% - 80px);
}

.timeline-panel-left {
  text-align: right;
}

.timeline>li .timeline-panel {
  flex: 1 calc(50% - 80px);
  max-width: calc(50% - 80px);
}

.timeline>li .timeline-image {
  margin-left: 15px;
  margin-right: 15px;
  width: 50px;
  height: 50px;
  background-color: #E80B10;
  color: #fff;
  border-radius: 100%;
  border: 5px solid #ff9600;
}

.timeline .timeline-heading h4 {
  margin: 0;
  color: inherit
}

<ul class="timeline">
  <li class="timeline-panel-left">
    <div class="timeline-panel">
      <div class="timeline-heading">
        <h4>SERVICE DE RÉPARATION</h4>
      </div>
    </div>
    <div class="timeline-image">
    </div>
  </li>
  <li class="timeline-panel-right">
    <div class="timeline-image">
    </div>
    <div class="timeline-panel">
      <div class="timeline-heading">
        <h4>DIAGNOSTIQUE</h4>
      </div>
    </div>
  </li>
</ul>