How to fit the width of a specific child element?

Question

problem

I\'m trying to create a skill meter.
(I could not ask the next question why, so I created a new account and asked)

current status:

Answer 1

Are you allowed to use CSS grids? It's really easy to do using it

figure {
  display: grid;
  grid-template: 'meter' auto 'name' min-content / 4.4rem; // set the size of the meter here!
  grid-row-gap: 1.5rem // just to space thing a little
}
figure img {
  grid-area: meter; //put both images on the same area so they overlap
  align-self: center; //center both horizontally and vertically
  justify-self: center;
}
figure .meter {
  width: 100%; // make it 100%, since the size is set on the grid template
}
figure .meter_t {
  height: 50%; // same as before, let the size be dictated by the grid
  width: 50%;
}
figure figcaption {
  grid-area: name; //put the name at the bottom
  justify-self: center; // so it overflows to the sides
}

You can even remove all that positioning code, just leave the sizes of the images.

https://codepen.io/anon/pen/zbOYPO

EDIT: added the centering of the titles