JSFiddle - React, Tailwind, and code Playground

HTML

<script src="http://code.highcharts.com/highcharts.js"></script>

<div id="container" style="width: 400px; height: 300px; margin: 0 auto"></div>

CSS

.name{
    width: 190px;
}
.value{
    width: 60px;
}

JavaScript

$("document").ready(
function(){
	$('#container').highcharts({
			chart:{
                type:'pie',
                height: 300,
                width: 400
                  },
            credits:{enabled: false},
            colors:[
                '#5485BC', '#AA8C30', '#5C9384', '#981A37', '#FCB319',     '#86A033', '#614931', '#00526F', '#594266', '#cb6828', '#aaaaab', '#a89375'
                ],
            title:{text: null},
			plotOptions: {
                pie: {
                    allowPointSelect: true,
                    cursor: 'pointer',
                    showInLegend: true,
                    dataLabels: {
                        enabled: false,                        
                        formatter: function() {
                            return this.percentage.toFixed(2) + '%';
                        }
                    } 									
                }
            },
            legend: {
                enabled: true,
                layout: 'vertical',
                align: 'right',
                width: 200,
                verticalAlign: 'middle',
                useHTML: true,
                labelFormatter: function() {
                    return '<div style="text-align: left; width:130px;float:left;">' + this.name + '</div><div style="width:40px; float:left;text-align:right;">' + this.y + '%</div>';
				}
            },
			series: [{
				type: 'pie',
                dataLabels: {
                    
                        },
				data: [
					['Domestic Equity', 38.5],
					['International Equity', 26.85],
					['Other', 15.70],
					['Cash and Equivalents', 10.48],
					['Fixed Income', 8.48]
				]
			}]
		});
	});