How to force Office UI Fabric ChoiceGroup to align horizontal

I am trying to build a SPFx webpart containing a ChoiceGroup. When I set the css style to ms-sm12 the choices are aligned vertical:

Show assigned to:
o anyone
* me
o nobody

I like them to align horizontal in one row:

Show assigned to: o anyone * me o nobody

When I set the style to ms-sm6, it aligns them "mixed": The Slider and Toggle are set to ms-sm3

Show assigned to: o anyone
* me
o nobody

With ms-sm4 it looks like:

With ms-sm3, ms-sm2, ms-sm1 it looks like (the title getting more and more squashed and all options in one column:

How can I force / encourage the options to be rendered horizontal?

Follow the steps given below :

1) Create New .scss file

ex: fabric.scss and paste this class in it.

  .inlineflex .ms-ChoiceField{
      display: inline-block;
   }

2) In your component give refernece like:

  import  './fabric.scss';

3) Add component and apply class.

  <ChoiceGroup 
                className="inlineflex"
                label='Pick one icon'
                options={ [
                {
                    key: 'day',                        
                    text: 'Day'
                },
                {
                    key: 'week',                        
                    text: 'Week'
                },
                {
                    key: 'month',                        
                    text: 'Month'                       
                }
                ] }
             />