Bug Report

#### What is the expected behavior?
It should show in a row.
#### What is the current behavior?

What are the steps to reproduce?
Providing a StackBlitz (or similar) is the best way to get the team to see your issue.
"dependencies": {
"@angular/animations": "~9.1.1",
"@angular/cdk": "^9.2.0",
"@angular/common": "~9.1.1",
"@angular/compiler": "~9.1.1",
"@angular/core": "~9.1.1",
"@angular/flex-layout": "^9.0.0-beta.29",
"@angular/forms": "~9.1.1",
"@angular/material": "^9.2.0",
"@angular/platform-browser": "~9.1.1",
"@angular/platform-browser-dynamic": "~9.1.1",
"@angular/router": "~9.1.1",
"rxjs": "~6.5.5",
"socket.io-client": "^2.3.0",
"tslib": "^1.11.1",
"zone.js": "~0.10.3"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.901.1",
"@angular/cli": "~9.1.1",
"@angular/compiler-cli": "~9.1.1",
"@angular/language-service": "~9.1.1",
"@types/jasmine": "~3.5.10",
"@types/jasminewd2": "~2.0.8",
"@types/node": "^13.11.1",
"codelyzer": "^5.2.2",
"jasmine-core": "~3.5.0",
"jasmine-spec-reporter": "~5.0.1",
"karma": "~5.0.1",
"karma-chrome-launcher": "~3.1.0",
"karma-coverage-istanbul-reporter": "~2.1.1",
"karma-jasmine": "~3.1.1",
"karma-jasmine-html-reporter": "^1.5.3",
"protractor": "~5.4.3",
"ts-node": "~8.8.2",
"tslint": "~6.1.1",
"typescript": "^3.8.3"
}
What is the use-case or motivation for changing an existing behavior?
Which versions of Angular, Material, OS, TypeScript, browsers are affected?
Is there anything else we should know?