Angular 2 Material form elements horizontal alignment

Question

I want to thank you ahead, for your time. I really appreciate all your help!

This is a form I created with Angular 2 Material Design. I'm wondering how can I align and ? As you can see in this snapshot below, the Bill Number is higher than Year.

Below is the code

<md-card class="bill-form">
<md-toolbar color="warn">
    <md-card-title>{{bill.Type}}</md-card-title>
</md-toolbar>
<md-card-content class="form-content">
    <form>
        <table style="width:100%" cellspacing="0">
            <tr>
            <td>
                <md-select placeholder="Vendor" [(ngModel)]="bill.VendorShortcut" name="VendorShorcut"
                (change)="getVendor(bill.VendorShortcut)">
                    <md-option>
                    </md-option>
                    <md-option *ngFor="let vendor of vendors" [value]="vendor">
                        {{vendor}}
                    </md-option>
                </md-select>
            </td>
            <td>
                <md-select placeholder="Type" [(ngModel)]="bill.Type" name="Type" selected="'Bill'">
                    <md-option [value]="'Bill'">
                        Bill
                    </md-option>
                    <md-option [value]="'Credit'">
                        Credit
                    </md-option>
                </md-select>

            </td>
            <td>
                <md-select placeholder="Month" [(ngModel)]="bill.Month" name="Month" selected="bill.Month">
                    <md-option *ngFor="let month of months" [value]="month">
                        {{month}}
                    </md-option>
                </md-select>
            </td>
            <td>
                <md-select placeholder="Year" [(ngModel)]="bill.Year" name="Year" selected="bill.Year">
                    <md-option *ngFor="let year of years" [value]="year">
                        {{year}}
                    </md-option>
                </md-select>
            </td>
            <td>
                <md-input-container>
                    <input mdInput placeholder="Bill Number"  [(ngModel)]="bill.BillNumber" name="BillNumber">
                </md-input-container>
            </td>
            <td>
                <md-input-container align="end">
                    <input mdInput placeholder="Amount" [(ngModel)]="bill.Total" name="Total">
                    <span md-prefix>$&nbsp;</span>
                    <span md-suffix></span>
                </md-input-container>
            </td>
            </tr>
        </table>

    </form>
</md-card-content>

Answer 1

Coming to this very late, but for people using the up-to-date angular material you may want to consider ditching the tables & containers and using the angular material-grid-list.

<mat-grid-list>
    <mat-grid-tile class="form-tile">
        Date:
    </mat-grid-tile>
    <mat-grid-tile class="form-tile">
        <input matInput placeholder="Date"  [(ngModel)]="date" name="date">
    </mat-grid-tile>
</mat-grid-list>

You can specify the row height and the number of columns. The api for this control can be found here:

Grid List

If you wish further styling inside the list, check out this further S-O post:

Further style your grid

On the example above you would use class form-tile to further style your component. In my experience this gives a consistent and tidy form experience.