I will try to answer you by using the information you gave us. There are probably other more elegant solutions, but I will try to answer your question with a quick answer. I will also not discuss the semantics of the elements in this answer. You should also use classes instead of the tag names for the CSS selectors I will present below, ok? But I will try to make the answer as simple as possible.

You have siblings (all "figcaption" tags are in the same level). One way of controlling them independently if by using:

figcaption { position: absolute; }

Absolute elements are positioned relative to a parent with a defined position. Thus, you will need to add a position to the figure:

.figure { position: relative; }

Now you can control the badges with top and left as you are doing. Example: https://jsbin.com/goqaqemudu/edit?html,css,output

The solution before has a major issue: you need to control the second green badge by hand. If you have more or less letters, they will be a bit strange. You can solve this issue by grouping them in a div:

<div class="badges-line"> <figcaption... <figcaption... </div> <div class="badges-line"> <figcaption... </div>

You will need to update the CSS to use such classes instead.

Another suggestion is to use float (this is a completely new suggestion). If you increase the margin of the second green badge, the blue badge will float to the next line when there is no enough space on the right. If you are curious to see what I am trying to say, see the example below and increase the value of the margin from 0.2em to 0.4em : the last label will float to the next line.

https://jsbin.com/ceqaqoxiji/edit?html,css,output