Показывать flex в строке легенды (или что-то в этом роде) в amcharts 4?

Question

У меня сейчас есть эта легенда.

Но мне нужно, чтобы это выглядело так:

В настоящее время у меня трое детей, созданных на основе легенды, и Я хочу расположить первые два в flex-start, а вторые два в flex-end контейнера. Я пытался использовать textAlign и contentAlign безрезультатно. Я также попытался нацелить контейнер с графика с помощью css. Любые идеи о том, что может работать?

newChart.legend = new am4charts.Legend();
newChart.legend.position = 'right';
newChart.legend.useDefaultMarker = true;
const legendContainer = newChart.legend.itemContainers.template;
legendContainer.width = 250;
// legendContainer.relativeWidth = 100;
const marker = newChart.legend.markers.template;
marker.disposeChildren();

const flag = newChart.legend.itemContainers.template.createChild(am4core.Label);
flag.paddingRight = -20;
flag.adapter.add('html', function (label: any, target: any) {
    let iso = target.dataItem.dataContext.dummyData.iso;
    if (target.dataItem.dataContext) {
        return `<span class='flag-icon flag-icon-${iso.toLowerCase()}'></span>`;
    } else {
        return label;
    }
});

const avgPercent = newChart.legend.itemContainers.template.createChild(am4core.Label);
avgPercent.adapter.add('html', function (label: any, target: any) {
    let percents = target.dataItem.dataContext.dummyData.percents;
    if (target.dataItem.dataContext) {
        return `<span>${findAveragePercent(percents)}%</span>`;
    } else {
        return label;
    }
});
avgPercent.events.on('inited', function (event: any) {
    event.target.toFront();
});

const donut = newChart.legend.itemContainers.template.createChild(am4core.Label);
// donut.horizontalCenter = '';
donut.adapter.add('html', function (label: any, target: any) {
    let percents = target.dataItem.dataContext.dummyData.percents;
    if (target.dataItem.dataContext) {
        return `<div class='donut'>
        <svg class='donut__svg' viewBox='0 0 64 64' xmlns='http://www.w3.org/2000/svg'>
        <circle class='donut__svg__base' cx='50%' cy='50%' r='25%' />
        <circle
        style='stroke:#845EC2; stroke-width: 32;'
        cx='50%'
        cy='50%'
        r='25%'
        stroke-dasharray='${findAveragePercent(percents)} 100'
        />
        <circle class='donut__svg__hole' cx='50%' cy='50%' r='40%' />
        </svg>
        </div>`;
    } else {
        return label;
    }
});
donut.events.on('inited', function (event: any) {
    event.target.toFront();
});

//create line series
CompanyTopOwnership.companyTopOwnerShips.map((ownershipItem: any) => {
    let newSeries = newChart.series.push(new am4charts.LineSeries());
    newSeries.name = ownershipItem.countryName;
    const newSeriesData = ownershipItem.ownerShipPercentageDates.map((percentItem: any) => {
        return percentItem;
    });

    newSeries.dummyData = {
        percents: ownershipItem.ownerShipPercentageDates,
        iso: ownershipItem.isoCode
    };

    newSeries.data = orderBy(
        newSeriesData,
        ({ year }) => {
            return moment(year).format('YYYY');
        },
        ['asc']
    );