React-Toolbox checkboxes inline

Question

I'm currently facing a problem with react-toolbox-checkboxes https://github.com/react-toolbox/react-toolbox/tree/dev/components/checkbox while trying to display them inline like this:

But all I can do is displaying them like this:

Code looks like this:

           <Checkbox
                checked={this.state.checkboxes[0].task}
                label={t('search:instance_template.task')}
                onChange={() => {
                    this.handleCheckboxChange(0, 'task')
                }}
            />

Styles like this:

input[type="checkbox"]{
    display: inline-block;
}

The checkboxes does receive classes and attributes but attributes like "display: inline-block" don't have any effect onto them. Any ideas? Thanks!

Answer 1

[Reading Purposes] Linking two pages as well that will help on how each style works. Flexbox, CSSFlexbox

Sample related to question.