How to render the TimePicker and DropDownList in JavaScript Button Group

 
<div class="e-btn-group">
    <input type='text' id='timePickerElem' />
    <input type="text" tabindex="1" id='ddlelement' />
</div>
        

 
/* for icons alignment */
.e-btn-group input {
    opacity: 1;
    position: relative;
}
 
/* Set border radius for dropdown element */
.e-btn-group .e-ddl {
    border-left: 0;
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
}
 
/* Set border radius for time picker element */
.e-btn-group .e-time-wrapper {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
} 

    // creates a timepicker with min and max property
let timeObject: TimePicker = new TimePicker({
    // sets the min value
    min: new Date('3/8/2017 9:00 AM'),
    // sets the max value
    max: new Date('3/8/2017 11:30 AM'),
    // sets the value
    value: new Date('3/8/2017 11:00 AM'),
    // set the width
    width: 120,
    // Disable show clear button
    showClearButton: false  
});
 
timeObject.appendTo('#timePickerElem');
 
   // define the array of data
let sportsData: string[] = ['Badminton', 'Cricket', 'Football', 'Golf', 'Tennis'];
 
   // initialize DropDownList component
let dropDownListObject: DropDownList = new DropDownList({
    // set the data to dataSource property
    dataSource: sportsData,
    // set the placeholder to DropDownList input element
    placeholder: "Select..",
    // set the width
    width: 110  
});
 
   // render initialized DropDownList
dropDownListObject.appendTo('#ddlelement');