Угловой HTML - пытается выровнять кнопки и ввод в ряд

Question

У меня есть набор кнопок, который должен оставаться вместе в правом конце строки, и у меня есть поле ввода, которое должно быть в левом конце строки.Попробуем CSS-сетку для блока.Иногда это работает, но на экранах с низким разрешением некоторые кнопки вообще не видны.

HTML

 <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>

CSS

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

Здесь на картинке нижеэтот набор кнопок должен быть в самом правом.

Answer 1

Для низких разрешений измените пользовательский интерфейс для правильных опций фильтра (например, меню гамбургера или что-то еще)

Для текущей проблемы пользовательского интерфейса, проверьте код ниже

.wrapper {
  background-color: skyblue;
}
.filterButtonsDiv {
  display:grid;
  grid-gap: 2px;
  grid-template-columns: 2fr 5fr;
  grid-template-rows: 22px;
}
.filterButtons-wrapper {
  text-align: right;
}

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