Content Overflow with <lightning:checkboxGroup>

Question

I want my lightning:checkboxGroup to overflow into two columns in my fixed width and height box. I believe the best way to do this is to edit the css but I am not sure if this is possible with the restrictions of LDS and the fact that the id is actually aura:id. I've tried with adding class and updating the components CSS but this did not work.

Is it possible to update the CSS or force this box to have two columns? I feel like has to be something in the slds grid system.

<div class="slds-scrollable wrapTopics" style="height: 10rem; margin-top: 5px; margin-bottom: 5px; border: 1px solid rgb(221, 219, 218);border-radius: .25rem;padding: 0 1rem 0 .75rem;">
    <lightning:checkboxGroup aura:id="checkbox"
                                         name="Checkbox Group"
                                         label="Add Topics"
                                         options="{! v.topicList }"
                                         value="{! v.selectedTopics }"/>
</div>

Answer 1

Please try it in this way.

HTML:

<div class="slds-scrollable wrapTopics multiSelect">
     <lightning:checkboxGroup aura:id="checkbox"
                                     name="Checkbox Group"
                                     label="Add Topics"
                                     options="{! v.topicList }"
                                     value="{! v.selectedTopics }"/>
</div>

CSS:

.THIS.multiSelect {
    height: 10rem;
    margin-top: 5px;
    margin-bottom: 5px;
    border: 1px solid rgb(221, 219, 218);
    border-radius: .25rem;
    padding: 0 1rem 0 .75rem; 

.THIS.multiSelect .slds-form-element__control {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
}