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:&quot;Lucida Grande&quot;, &quot;Lucida Sans Unicode&quot;, 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 highcharts-tracker"><g transform="translate(197,30)" style="" zIndex="1"><text y="25" style="font-size: 1.25rem; color: rgb(1, 47, 96); fill: rgb(1, 47, 96); text-shadow: 0px 0px 6px rgb(255, 255, 255), 0px 0px 3px rgb(255, 255, 255);" zIndex="1" x="5"><tspan>13.5</tspan></text></g></g><g zIndex="7"...

CSS

.chart-container {
    padding: 1.25rem 0.625rem;
}

#barcontainer div {
    min-width: 300px !important;
    line-height: normal;
    word-break: break-all;
    font-size: 1.25rem;
}
#barcontainer > div > svg,
#barcontainer > div > div,
#barcontainer > div > div > span {
    position: relative !important;
}
#barcontainer > div {
    height: auto !important;
}
/*
#barcontainer > div > svg {
    top: -20px !important;
}
#barcontainer > div {
    -webkit-display: flex;
    display: flex;
    -webkit-flex-flow: column;
    flex-flow: column;
}
#barcontainer > div > svg {
    -webkit-order: 2;
    order: 2;
}
#barcontainer > div > div {
    -webkit-order: 1;
    order: 1;
}
*/

JavaScript

function swapSibling(node1, node2) {
    node1.parentNode.replaceChild(node1, node2);
    node1.parentNode.insertBefore(node2, node1); 
}
/*
window.onload = function() {
  */  
    var parent = document.getElementById("barcontainer").children[0];
    var svg = parent.children[0];
    var text = parent.children[1];    
    swapSibling(svg, text);
/*
}
*/