Preventing one image misaligning another in HTML/CSS

Question

I have a dynamically generated list of planets. Following detection of some of the properties of these planets via knockout.js, one or two icons may be added to them to indicate certain features. The icons are a green circle and a blue thruster.

When either icon is added to a planet, it looks fine, but if both icons are added the thruster is misaligned.

- correctly aligned

- misaligned

<div class="all-planets" data-bind="foreach: selection.system().planets()">
  <div
    class="div_planet"
    data-placement="right"
    data-bind="tooltip: $root.gwaioPlanetData[$index()]"
  >
    <img
      style="height: 20px; width: 20px"
      data-bind="attr: { src: 'coui://ui/main/shared/img/planets/' + $data.generator.biome + '.png' }"
    />
    <img
      data-bind="visible: $data.starting_planet"
      class="img_start"
      src="coui://ui/main/game/live_game/img/planet_list_panel/icon_planet_start.png"
    />
    <img
      data-bind="visible: $data.required_thrust_to_move > 0"
      class="thruster_count"
      src="coui://ui/main/game/server_browser/img/icon_thruster.png"
    />
  </div>
</div>

#system-detail .all-planets {
  margin: 0px 0px 0px 0px;
  padding: 0px 16px 0px 4px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

#system-detail .div_planet {
  height: 20px;
  width: 20px;
  margin: 4px;
}

#system-detail img.img_start {
  height: 16px;
  width: 16px;
  position: relative;
  top: -12px;
  right: -10px;
}

#system-detail .thruster_count {
  height: 12px;
  width: 13px;
  position: relative;
  top: -8px;
}

I fear this is simply my lack of knowledge in CSS showing. I've found I can align the thrusters if I add <div> tags around both <img> tags and then set an absolute position for the thruster image. However, the planets can potentially wrap around and form a second row, which would break this setup. It also makes the setup incredibly fragile since this area could be subject to change.

What should I be doing to prevent the green circle image disrupting the position of the blue thruster image?

EDIT: I've added the icons (all planet dimensions are the same)

Answer 1

I took advantage of knockout to setup two different classes, determining which to use based on whether both icons were present. This allows me to setup two different CSS class selectors.

    <div class="start" data-bind="visible: $data.starting_planet">
      <img
        class="img_start"
        src="coui://ui/main/game/live_game/img/planet_list_panel/icon_planet_start.png"
      />
      <img
        data-bind="visible: $data.required_thrust_to_move > 0"
        class="thruster_count"
        src="coui://ui/main/game/server_browser/img/icon_thruster.png"
      />
    </div>
    <div
      class="no_start"
      data-bind="visible: !$data.starting_planet && $data.required_thrust_to_move > 0"
    >
      <img
        class="thruster_count"
        src="coui://ui/main/game/server_browser/img/icon_thruster.png"
      />
    </div>

#system-detail .start .thruster_count {
  height: 12px;
  width: 13px;
  position: relative;
  top: -25px;
  right: 2px;
}

#system-detail .no_start .thruster_count {
  height: 12px;
  width: 13px;
  position: relative;
  top: -8px;
  right: 2px;
}

Answer 2

Another way you could try may be like this (I've removed some of the code not dealing directly with the positioning). The borders and extra planets were added in order to show how it would work:

.all-planets {
  margin: 0px 0px 0px 0px;
  padding: 0px 16px 0px 4px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
}

.div_planet {
  height: 20px;
  width: 20px;
  margin: 4px;
  position: relative;
  border: 1px solid blue;
  background: url("https://i.stack.imgur.com/w0Ptk.png") no-repeat 50% 50%;
  padding: 0.5em;
}

img.img_start {
  height: 16px;
  width: 16px;
  position: absolute;
  bottom: 0;
  left: 0;
}

.thruster_count {
  height: 12px;
  width: 13px;
  position: absolute;
  bottom: 0;
  right: 0;
}

<div class="all-planets" data-bind="foreach: selection.system().planets()">
  <div class="div_planet" data-placement="right" data-bind="tooltip: $root.gwaioPlanetData[$index()]">
    <img data-bind="visible: $data.starting_planet" class="img_start" src="https://i.stack.imgur.com/o9Q3m.png" />
    <img data-bind="visible: $data.required_thrust_to_move > 0" class="thruster_count" src="https://i.stack.imgur.com/BX1cQ.png" />
  </div>
  <div class="div_planet" data-placement="right" data-bind="tooltip: $root.gwaioPlanetData[$index()]">
    <img data-bind="visible: $data.starting_planet" class="img_start" src="https://i.stack.imgur.com/o9Q3m.png" />
    <img data-bind="visible: $data.required_thrust_to_move > 0" class="thruster_count" src="https://i.stack.imgur.com/BX1cQ.png" />
  </div>
  <div class="div_planet" data-placement="right" data-bind="tooltip: $root.gwaioPlanetData[$index()]">
    <img data-bind="visible: $data.starting_planet" class="img_start" src="https://i.stack.imgur.com/o9Q3m.png" />
    <img data-bind="visible: $data.required_thrust_to_move > 0" class="thruster_count" src="https://i.stack.imgur.com/BX1cQ.png" />
  </div>
</div>