Angular 角度HTML-尝试对齐按钮&；一行输入

我有一个按钮集，需要保持在一行的右端，我有一个输入字段，应该在该行的左端。正在尝试CSS网格fr单元。它有时可以工作，但在低分辨率的屏幕上，一些按钮根本看不到

HTML

在下面的图片中，这些按钮应该在最右边。

---

对于低分辨率，更改右过滤器选项的用户界面（如汉堡包菜单或任何东西）

对于当前的UI问题，请检查下面的代码

.wrapper{
背景色：天蓝色；
}
.filterButtonsDiv{
显示：网格；
网格间距：2px；
网格模板柱：2fr 5fr；
网格模板行：22px；
}
.filterButtons包装器{
文本对齐：右对齐；
}

清楚的
{{button.text}

谢谢@Navdeep，这正是我想要的。欢迎兄弟！：）

 <div class="filterButtonsDiv">
        <div style="margin-left:15px">
            <mat-form-field>
                <input style="border:none" matInput placeholder="Filter">
            </mat-form-field>
        </div>
        <div style="float:right">
            <button class="filterButtons">
                <b>Clear</b>
            </button>
            <button class="filterButtons" *ngFor="let button of filterCrew">
                <b>{{ button.text }}</b>
            </button>
        </div>
    </div>

.filterButtonsDiv {
  display:grid;
  grid-gap: 2px;
  grid-template-columns: 2fr 5fr;
  grid-template-rows: 22px;
}