Why is the radio button and check box overlapping their labels?

This is my output now.

This is the code I have written for it

  <div class="row">
            <div class="col-md-6 form-group" style="float: right">
            <strong>choose</strong>

            <?php
RadioList::create(array(
    "name"=>"radio",
    "data"=>array(
        "Current"=>"1",
        "Date Range"=>"2",       
    ),
    "display"=>"horizontal",
    "clientEvents"=>array(
        "change"=>"function(s){
            console.log(s.value);
            $('#form1').submit();
            
        }",
    )
));
?>
        </div>
       

        </div>

It did'nt work. the overlapping of button over label still persist.

Thankyou. That worked:)

Now it is aappearing like this.

but what is expected is: label followed by radio button.

                        label1 o

now what I get is radio button followed by label, as seen in the diagram

                        o label1
                        

This is the code I have. please help

<div class="row">
            <div class="col-md-3 form-group" style="float: right">
 <div dir="ltr">   

            <?php
RadioList::create(array(
    "name"=>"radio",
    "data"=>array(
        "بحث بتاريخ"=>"2",  
         "إجازة حالية"=>"1",    
    ),
    "display"=>"horizontal",
    "clientEvents"=>array(
        "change"=>"function(s){
            console.log(s.value);
            $('#form1').submit();

                          
        }",
    )
));
?>
</div>
        </div>
</div>