JSFiddle - React, Tailwind, and code Playground

HTML

<script src="//html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<body class="single single-post postid-1163 single-format-image group-blog">
<div id="page" class="hfeed site">

    
	<div id="content" class="site-content">

	<div id="primary" class="content-area">
		<main id="main" class="site-main" role="main">

		
			
<article id="post-1163" class="post-1163 post type-post status-publish format-image hentry category-post-formats tag-image tag-post-formats tag-shortcode">


	<div class="entry-content">
        
		<h2>dl in the editor</h2>
		<div class="html5-captions">
		
		<dl id="attachment_1628" class="wp-caption aligncenter"><dt class="wp-caption-dt"><img class="size-large wp-image-1628" src="http://placehold.it/200x200" alt="It’s dangerous to go alone! Take this." width="200" height="200" data-mce-src="http://placehold.it/200x200"></dt><dd class="wp-caption-dd">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</dd></dl>
		
		</div>
        
<h2>themes: figure and figcaption</h2>

		<figure id="attachment_42" class="wp-caption aligncenter"><img class="size-medium wp-image-42" alt="It’s dangerous to go alone! Take this." src="http://placehold.it/200x200" alt="" width="200" height="200"><figcaption class="wp-caption-text">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</figcaption></figure>
		
		<div style="clear:both;"></div>
		
		<figure id="attachment_42" class="wp-caption alignleft"><img class="size-medium wp-image-42" alt="It’s dangerous to go alone! Take this." src="http://placehold.it/200x200" alt="" width="200" height="200"><figcaption class="wp-caption-text">One morning, when Gregor Samsa woke from troubled dreams, he found himself transformed in his bed into a horrible vermin.</figcaption></figure>
		
		<div style="clear:both;"></div>
		
		<figure id="attachment_42" class="wp-caption alignright"><img...

CSS

/*--------------------------------------------------------------
7.0 Alignments
--------------------------------------------------------------*/
.alignleft {
	float: left;
	margin-right: 1.5em;
}
.alignright {
	float: right;
	margin-left: 1.5em;
}
.aligncenter {
	clear: both;
	display: block;
	margin: 0 auto;
}

.wp-caption {
	display: table;
    /* ugly background just for testing  */
	background: red;
}
.wp-caption-text {
	display: table-caption;
	caption-side: bottom;
}

.html5-captions .wp-caption { 
 	padding: 0;
} 
.html5-captions .wp-caption-dd {
	display: table-caption;
	caption-side: bottom;
	margin: 0;
	padding: 0;
}