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:


Labels: ,