title: Angular Display 2 Cards Side By Side
body: <p>I have an <code>Angular 5</code> website which is using <code>routing</code>.</p>
  
  <p>In my code branch i have a folder which contains section with various data in them.</p>
  
  <p>What i'm after doing is then having a main page display which ever sections i require which i have done but the issue is, is that because i have 2 <code>component.html</code> files nested in one it displays my info section on individual lines.</p>
  
  <p>I have tried:</p>
  
  <ul>
  <li>Wrapping them in <code>DIV</code> on the main page</li>
  <li>Float: left/right on the components and <code>mat-card</code></li>
  <li>Setting widths</li>
  </ul>
  
  <p><strong>Personal details component html</strong></p>
  
  <pre><code>  &lt;mat-card&gt;
      &lt;mat-card-title class="firstCard"&gt;Personal details&lt;/mat-card-title&gt;
      &lt;mat-card-content&gt;
          &lt;mat-form-field&gt;
            &lt;input matInput id="invName" placeholder="Full name" #name value="Mr Test Test" readonly&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field&gt;
            &lt;input matInput id="invRef" placeholder="Investor reference" #ref value="A11111" readonly&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field&gt;
            &lt;input matInput id="invId" placeholder="Investor ID" #id value="101010" readonly&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field&gt;
            &lt;input matInput id="invDoB" placeholder="Date of birth" #dob value="01 January 1950" readonly&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field&gt;
            &lt;input matInput id="invNino" placeholder="National Insurance Number" #nino value="AA112233A" readonly&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field&gt;
            &lt;input matInput id="invMumMaidenName" placeholder="Mother's maiden name" #mummaidenname value="Test" readonly&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field&gt;
            &lt;input matInput id="invFirstSchool" placeholder="First school attended" #firstschool value="St.Testo" readonly&gt;
          &lt;/mat-form-field&gt;
      &lt;/mat-card-content&gt;
    &lt;/mat-card&gt;
  </code></pre>
  
  <p><strong>Contact details component html</strong></p>
  
  <pre><code>  &lt;mat-card&gt;
      &lt;mat-card-title class="secondCard"&gt;Contact details&lt;/mat-card-title&gt;
      &lt;mat-card-content&gt;
          &lt;mat-form-field&gt;
            &lt;input matInput id="invAddress" placeholder="Address" #address value="'this is a description of the some text' + \n + 'and further description'" readonly&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field&gt;
            &lt;input matInput id="invPhone" placeholder="Telephone number" #tel value="01000 000 000" readonly&gt;
          &lt;/mat-form-field&gt;
          &lt;mat-form-field&gt;
            &lt;input matInput id="invEmail" placeholder="Email address" #email value="test@test.com" readonly&gt;
          &lt;/mat-form-field&gt;
      &lt;/mat-card-content&gt;
    &lt;/mat-card&gt;
  </code></pre>
  
  <p>** Main page component html **</p>
  
  <pre><code>&lt;div&gt;
     &lt;app-personaldetails&gt;&lt;/app-personaldetails&gt;
     &lt;app-contactdetails&gt;&lt;/app-contactdetails&gt;
  &lt;/div&gt;
  </code></pre>