How to display Radio Group horizontally using Salesforce Lighting Aura component?

Sample Code:

Aura Component:

1. <aura:component implements="force:appHostable" >  
2.       
3.     <aura:attribute name="selectedVal1" type="String" default="Not Sure" />  
4.     <aura:attribute name="selectedVal2" type="String" default="No" />  
5.     <aura:attribute name="options"   
6.                     type="List"   
7.                     default="[{'label': 'Yes', 'value': 'Yes'},  
8.                               {'label': 'No', 'value': 'No'},  
9.                               {'label': 'Not Sure', 'value': 'Not Sure'}]"/>    
10.       
11.     <div class="slds-box slds-theme_default">  
12.           
13.         <lightning:radioGroup label="Select Option"  
14.                               options="{! v.options }"  
15.                               value="{! v.selectedVal1 }"  
16.                               type="button"  
17.                               variant="label-inline"/><br/><br/>  
18.           
19.         <lightning:radioGroup label="Select Option"  
20.                               options="{! v.options }"  
21.                               value="{! v.selectedVal2 }"  
22.                               type="radio"  
23.                               variant="label-inline"  
24.                               style="display:inline-block !important"/>  
25.           
26.     </div>  
27.       
28. </aura:component> 

Aura Component Style:

1. .THIS .slds-radio {  
2.     display: inline !important;  
3. } 

Output: