JSFiddle - React, Tailwind, and code Playground
HTML
<div data-highcharts-chart="1" id="barcontainer" class="chart-container">
<div style="position: relative; overflow: hidden; width: 320px; height: 120px; text-align: left; line-height: normal; z-index: 0; left: 0.25px; top: 0.0333405px;" id="highcharts-2" class="highcharts-container">
<svg height="120" width="270" xmlns="http://www.w3.org/2000/svg" style="font-family:"Lucida Grande", "Lucida Sans Unicode", Arial, Helvetica, sans-serif;font-size:12px;" version="1.1">
<desc>Created with Highcharts 4.1.1</desc>
<defs>
<clipPath id="highcharts-3">
<rect height="220" width="95" y="0" x="0"></rect>
</clipPath>
</defs>
<rect class=" highcharts-background" fill="#FFFFFF" strokeWidth="0" height="120" width="270" y="0" x="0"></rect>
<g zIndex="1" class="highcharts-grid"></g>
<g zIndex="1" class="highcharts-grid"></g>
<g zIndex="2" class="highcharts-axis">
<path visibility="visible" zIndex="7" stroke-width="1" stroke="transparent" d="M -0.5 10 L -0.5 105" fill="none"></path>
</g>
<g zIndex="2" class="highcharts-axis"></g>
<g zIndex="3" class="highcharts-series-group">
<g clip-path="url(#highcharts-3)" height="95" width="220" style="" transform="translate(220,105) rotate(90) scale(-1,1) scale(1 1)" zIndex="0.1" visibility="visible" class="highcharts-series highcharts-tracker">
<rect ry="0" rx="0" fill="#0061a5" height="198" width="50" y="23" x="23"></rect>
</g>
<g clip-path="none" height="95" width="220" transform="translate(220,105) rotate(90) scale(-1,1) scale(1 1)" zIndex="0.1" visibility="visible" class="highcharts-markers"></g>
</g>
<g style="" opacity="1" transform="translate(0,10) scale(1 1)" zIndex="6" visibility="visible" class="highcharts-data-labels...
CSS
.chart-container {
padding: 1.25rem 0.625rem;
}
#barcontainer div {
min-width: 300px !important;
line-height: normal;
word-break: break-all;
font-size: 1rem;
}