center align images in ul

HTML

<div id="parentDiv">
  <div class="item-image" ></div>
  <div class="text">hi this is an example</div>
  <div class="image2"></div>
</div>
<div id="parentDiv">
  <div class="item-image" ></div>
  <div class="text">in this example the image is pushed</div>
  <div class="image2"></div>
</div>
<div id="parentDiv">
  <div class="item-image" ></div>
  <div class="text">I want it like this</div>
  <div class="image2"></div>
</div>

CSS

#parentDiv {
    width: 300px;
    position:relative;
    display: flex;
}

.item-image {
    background-image: url(http://placehold.it/200x150);
    background-repeat: no-repeat;
    background-position: center center;
    height: 60px;
    width: 100px;
    background-size: 80%;
}

.text {
    display: flex;
    align-items: center;
    text-align: left;
    flex: 1;
    padding-right: 50px;
}

.image2 {
    display: flex;
    position: absolute;
    right: 0;
    width: 50px;
    background-image: url(http://placehold.it/200x150);
    background-repeat: no-repeat;
    background-position: center center;
    height: 60px;
    background-size: 80%;
}