Angular Material multiple "input" on same row

Angular Material's inputs are displaying in row by default (see stackblitz below), and may be you override this behavior somewhere in your project, I mean CSS rules. If you like Flexbox, you can use @angular/flex-layout, you can easily control how to display items: in row or in column, and this package is very common among Angular developers. Here is a simple demo with "default" behavior (without any additional rules) and 2 layout options: column and row:

STACKBLITZ


You are probably looking at the css style display: block; Change whatever you are looking at to display: inline-block;

edit

Now that you showed some code. Your basic html is fine, it shows the inputs next to each other. So something is wrong inside your example-form or example-full-width classes.