JSFiddle - React, Tailwind, and code Playground

HTML

<body style="max-width: 500px; padding-left: 80px; padding-right: 20px;">   
<p>Предсказуемость непредсказуема. Предсказуемость непредсказуема. Предсказуемость непредсказуема. Предсказуемость непредсказуема. Предсказуемость <em data-ref="1">непредсказуема и недоказуема</em>. Предсказуемость непредсказуема. Предсказуемость непредсказуема. Предсказуемость совсем ни разу не  <em data-ref="2, 3, 4">непредсказуема</em>. Предсказуемость непредсказуема. Предсказуемость непредсказуема. Предсказуемость непредсказуема. </p>
    
    <p>Однако, здравствуйте.</p>
    
    <figure>
      <figcaption>
          A cute cat
          <span class="subtitle">is in the picture</span>
      </figcaption>
      <img src="http://lorempixel.com/350/250/cats" alt="A cute Kitten">      
    </figure>

CSS

body{
	font-family: 'Times New Roman';
}
figure{
	padding: 0px;
	margin: 0px;
	position: relative;
    display:inline-block;
	
	max-width: 100%;
}

figcaption{
	position: absolute;
	color:white;
	bottom:0px;
    left:0px;
    right:0px;
	padding-bottom: 5px;
	padding-left: 10px;
	font-size: 25px;
	background-color:rgba(0,0,0, 0.8);
	
	
}
.subtitle{
	font-size: 14px;
	display: block;
	color: #c0c0c0;
}
em{
	border-bottom: 1px;
	border:0px;
	border-bottom: 1px;
	border-style: solid;
	border-color:#f0c000;
}

em:before{
	float:left;
	content: '[' attr(data-ref) ']';
	margin-left:-90px;
	color:#888888;
	font-style: normal;
	text-align: right;
	width: 80px;

	
	
}
img{
    max-width:100%;
    display:block;
}