Date Range Picker Position WRONG

I am trying to call mat date-range-picker calendar inside a component , that means supposedly i have one component menu, calling component leave from menu component,and in menu component i have mat date range picker calendar. now the position of calendar,when i call leave component must be after the menu component, as that is how i written in my HTML code. but calendar is showing on top left. please do help. I tried adding this to css file. But didnt work for me.

@import '../../../../../../node_modules/@angular/material/prebuilt-themes/indigo-pink.css';

         <div class ="calendar">
         <mat-date-range-input [rangePicker]="picker" 
         style="display:none">
         <input matStartDate matInput placeholder="Start date"/>
         <input matEndDate matInput placeholder="End date"/>
          </mat-date-range-input>
           <mat-date-range-picker  #picker  [opened]="true" 
           (closed)="openCalendar(picker)">
             </mat-date-range-picker>
           </div>

Try dropping the style="display:none" from mat-date-range-input element. It's the only strange thing I see in your code. If it doesn't work you could try to clean your css file and building it again. It could be inheriting the position from another higher level css.