JSFiddle - React, Tailwind, and code Playground

HTML

<figure class="caption caption-img align-left">
    <img alt="Broken with %" src="https://placehold.co/6000x4000" width="46.52%" height="400">
    <figcaption>Align left and wrap text - Broken!</figcaption>
</figure>
<figure class="caption caption-img align-left">
    <img alt="Works with px" src="https://placehold.co/6000x4000" width="400px" height="400">
    <figcaption>Align left and wrap text - Works!</figcaption>
</figure>

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-left {
  float: left;
}

/**
 * @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;
}