How can I make the width of my <figcaption> match the width of the <img> inside its <figure> tag?

Adding this Code to <figure> and <figcaption> CSS-Attributes helped me with the same problem. Also, it preserves the responsivenes of your images and captions.

figure { display: table; }


figcaption { display: table-caption; caption-side: bottom ; }

1. Adding display: table; sets the stage.

2. Adding display: table-caption; alone placed the caption on top of the image, The caption-side property specifies the placement of the table caption at the bottom, top is default.

This will place the figcaption side by side with the img:

figure {
    display: table;
}
img, figcaption {
    display: table-cell;
    vertical-align: bottom;
}
figcaption {
    padding-left: 4px;
}

Here's an example. However I'm not entirely clear what you're trying to achieve - you say in the question that you want the figure to stay at 200px width, but then you comment that you want the figcaption to appear to the right, which would make the figure wider. If all you want is for the figcaption to be restricted to the width of the image, this should work:

figure {
    display: table;
    width: 1px; /* This can be any width, so long as it's narrower than any image */
}
img, figcaption {
    display: table-row;
}