JSFiddle - React, Tailwind, and code Playground

HTML

<h3>Broken - Should be floated right</h3>
<figure class="caption caption-img align-right">
    <img alt="Broken with %" src="https://placehold.co/6000x4000" width="46.52%" height="400">
</figure>

<figure class="caption caption-img align-right">
    <img alt="Works with px" src="https://placehold.co/6000x4000" width="400px" height="400">
</figure>
<h3>
Works - Image floated right
</h3>

CSS

/* Responsive */
img {
  max-width: 100%;
  height: auto;
}
figure {
  background: pink;
}
figcaption {
  background: hotpink;
  padding: 5px;
}

/**
 * @file
 * Alignment classes for text and block level elements.
 */
/**
 * Alignment classes for block level elements (images, videos, blockquotes, etc.)
 */
.align-right {
  float: right;
}

/**
 * @file
 * Caption filter: default styling for displaying image captions.
 */

/**
 * Essentials, based on http://stackoverflow.com/a/13363408.
 */
.caption {
  display: table;
}

.caption > * {
  display: block;
  max-width: 100%;
}

.caption > figcaption {
  display: table-caption;
  max-width: none;
  caption-side: bottom;
}