adjust table td content using css

When the screen is not zoomed out the td with the data is just working fine as you can see on the first screenshot , but when the screen is lower reso if if we try to zoom out like the second screenshot the data inside td or td is not adjusting as you can see we could no longer see the full date the calendar is not adjusting, how do we solve this using css ?

#1st screenshot

enter image description here

#2nd screenshot

enter image description here

#html code - this is just a snippet

 <th style="width: 109px;"><span>Date</span></th>

    <td class="date-text-right">
    <div fxLayout="row" fxLayoutAlign="center center">
        <input (click)="openPicker(pickerDate);"
            [(ngModel)]="data.targetDate" [matDatepicker]="pickerDate">
        <mat-datepicker #pickerDate></mat-datepicker>
        <span (click)="openPicker(pickerTargetDate);"
            style="font-size: 18px;margin-right:10px;">
            calendar_today
        </span>
    </div>
    </td>

#css

.date-text-right {
  text-align: right;
  padding-right: 10px;
}