title: Set width on input mat-form-fields for angular material
body: <p>I am so very new to Angular, and I am trying to create a form with longer-than-default input fields.  This is my current code:</p>
  <p><code>person.component.html</code></p>
  <pre class="lang-xml prettyprint-override"><code>&lt;form class=&quot;new-person-form&quot;&gt;
      &lt;mat-card&gt;
          &lt;mat-form-field&gt;
              &lt;input matInput placeholder=&quot;Name&quot;&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field&gt;
              &lt;input matInput placeholder=&quot;Birthday&quot;&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-checkbox&gt;Active&lt;/mat-checkbox&gt;
      &lt;/mat-card&gt;
  &lt;/form&gt;
  </code></pre>
  <p><code>person.component.css</code></p>
  <pre class="lang-css prettyprint-override"><code>.mat-form-field {
      padding: 10px;
  }
  
  .mat-checkbox {
      padding: 10px;
  }
  </code></pre>
  <p><code>person.component.html</code></p>
  <pre class="lang-xml prettyprint-override"><code>&lt;form class=&quot;new-person-form&quot;&gt;
      &lt;mat-card fxLayout=&quot;row&quot;&gt;
          &lt;mat-form-field&gt;
              &lt;input matInput placeholder=&quot;Name&quot; fxFlex=&quot;50&quot;&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field&gt;
              &lt;input matInput placeholder=&quot;Birthday&quot; fxFlex=&quot;25&quot;&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-checkbox fxFlex=&quot;25&quot;&gt;Active&lt;/mat-checkbox&gt;
      &lt;/mat-card&gt;
  &lt;/form&gt;
  </code></pre>
  <p><code>person.component.css</code></p>
  <pre class="lang-css prettyprint-override"><code>.mat-form-field {
      padding: 10px;
  }
  
  .mat-checkbox {
      padding: 10px;
  }
  </code></pre>
  <p>And this is the result:</p>
  <pre><code>|                                                                          |
  |   Name___________  Birthday_______  [] Active                            |
  |                                                                          |
  </code></pre>
  <p>I'm trying to lengthen <code>Name</code> to be about 50% of the page, so something like this:</p>
  <pre><code>|                                                                          |
  |   Name___________________________  Birthday_______  [] Active            |
  |                                                                          |
  </code></pre>
  <p>I'm not super great at CSS, so I think FlexLayout might be what I need, but so far I can't get it to work correctly.</p>