Alignment Issue with fluent-ui ChoiceGroup if dir="rtl", what could be the CSS to fix this?

Question

const { ChoiceGroup, IChoiceGroupOption, ThemeProvider, initializeIcons } = window.FluentUIReact;

// Initialize icons in case this example uses them
initializeIcons();

const options: IChoiceGroupOption[] = [
  { key: 'A', text: 'Option A' },
  { key: 'B', text: 'Option B' },
  { key: 'C', text: 'Option C' },
  { key: 'D', text: 'Option D' },
];

const horizontalChoiceGroupStyles = { flexContainer: { display: 'flex', flexDirection: 'row' } };

const ChoiceGroupBasicExample: React.FunctionComponent = () => {
  return <ChoiceGroup dir="rtl" defaultSelectedKey="B" options={options} onChange={_onChange} label="Pick one" required={true} 
  styles={horizontalChoiceGroupStyles}/>;
};

function _onChange(ev: React.FormEvent<HTMLInputElement>, option: IChoiceGroupOption): void {
  console.dir(option);
}

const ChoiceGroupBasicExampleWrapper = () => <ThemeProvider><ChoiceGroupBasicExample /></ThemeProvider>;
ReactDOM.render(<ChoiceGroupBasicExampleWrapper />, document.getElementById('content'))

it will show output as below

Please refer to below codepen for more details

https://codepen.io/pravindahale/pen/eYjYaQG