Question: I started with this [SO](https://stackoverflow.com/questions/35269947/css-align-one-item-right-with-flexbox/35270047) answer and I was trying to use the pure flexbox answer that was provided.

However I see the following result when I try this.

I am not sure why Button 4 is appearing higher on the row then the rest of the elements.

HTML

```
  <div class="customFlexContainer">
    <div>
      <mat-form-field>
        <mat-label>Search</mat-label>
        <input matInput placeholder="Search" #searchString />
      </mat-form-field>

      <button color="primary" mat-button >Button 1</button>
      <button color="primary" mat-button (click)="doSomething()">Button 2</button>
      <button color="primary" mat-button (click)="doSomething()">Button 3</button>
    </div>
    <div>
      <button mat-button color="primary" (click)="do2()">Button 4</button>
    </div>

  </div>

```

CSS

```
.customFlexContainer {
  display: flex;
  justify-content: space-between;
  height: 0%;
  align-content: center;
}

button {
  margin: 5px;  
}

```

Result:
[![result](https://i.stack.imgur.com/H39N8.png)](https://i.stack.imgur.com/H39N8.png)

EDIT:

In my style.css the following line appears to possibly be causing the issue.

```
@import "~@angular/material/prebuilt-themes/deeppurple-amber.css";*

```

If I comment it out it aligns correctly, but the page is not styled at all.

Answer: 
I was able to resolve the issue by doing the following:

```
  <div class="customFlexContainerNoSpace">
    <div>
      <mat-form-field>
        <mat-label>Search</mat-label>
        <input matInput placeholder="Search" #searchString />
      </mat-form-field>
    </div>
    <div class="customFlexContainer flexGrow3">
      <div>
        <button color="primary" mat-button #searchButton>Button 1</button>
        <button color="primary" mat-button>Button 2</button>
        <button color="primary" mat-button>Button 3</button>
      </div>
      <div>
        <button class="goRight" mat-button color="primary">Button 4</button>
      </div>
    </div>
  </div>

```

CSS

```
.customFlexContainer {
  display: flex;
  flex-flow: row;
  justify-content: space-between;
  height: 0%;
  align-items: center;  
}

.customFlexContainerNoSpace {
  display: flex;  
  height: 0%;
  align-items: center;
}

.flexGrow3 {
  flex-grow: 3;
}

button {
  margin-left: 5px;  
}

.goRight {
  align-self: flex-end;
}

```
B'coz you use `display: flex;`

You should be use this simple way
add `max-width: 537px;` into `.customFlexContainer` class

Hope this help. Let me know further clarification.

```css
    .customFlexContainer {
  display: flex;
  justify-content: space-between;
  height: 0%;
  align-content: center;
      max-width: 537px;
}

button {
  margin: 5px;  
}
```

```html
  <div class="customFlexContainer">
    <div>
      <mat-form-field>
        <mat-label>Search</mat-label>
        <input matInput placeholder="Search" #searchString />
      </mat-form-field>

      <button color="primary" mat-button >Button 1</button>
      <button color="primary" mat-button (click)="doSomething()">Button 2</button>
      <button color="primary" mat-button (click)="doSomething()">Button 3</button>
    </div>
    <div>
      <button mat-button color="primary" (click)="do2()">Button 4</button>
    </div>

  </div>
```