How to put cards side by side in Angular Material?

Question

I'm not sure if some other CSS is messing with the way that I'm creating the site, but I cannot get the two angular-material cards to stay side by side. How can I do this?

<div class="container">
          <div class="">
            <mat-card>
              <mat-card-header>
                <mat-card-title>Leading Organization</mat-card-title>
                <mat-card-subtitle></mat-card-subtitle>
              </mat-card-header>

              <mat-divider inset="true"></mat-divider>

              <mat-card-content>

                <div class="col s6">

                  <label>Strategic perspective </label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Strategic"></mat-slider>

                  </p>

                </div>

                <div class="col s6">

                  <label>Being a quick study </label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Quick"></mat-slider>

                    <!--<input type="text" id="quick" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Quick" required />-->
                  </p>

                </div>

                <div class="col s6">

                  <label>Decisiveness</label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Decisive"></mat-slider>
                    <!--<input type="text" id="decisiveness" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Decisive" required />-->
                  </p>
                </div>

                <div class="col s6">

                  <label>Change management</label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Change"></mat-slider>

                    <!--<input type="text" id="change" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Change" required />-->
                  </p>
                </div>

              </mat-card-content>


            </mat-card>


            <mat-card>
              <mat-card-header>
                <mat-card-title>Leading Self</mat-card-title>
                <mat-card-subtitle></mat-card-subtitle>
              </mat-card-header>

              <mat-divider [inset]="true"></mat-divider>

              <mat-card-content>

                <div class="col s6">
                  <label>Taking initiative</label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Taking"></mat-slider>

                    <!--<input type="text" id="taking" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Taking" required />-->
                  </p>
                </div>

                <div class="col s6">
                  <label>Composure </label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Composure"></mat-slider>

                    <!--<input type="text" id="composure" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Composure" required />-->
                  </p>
                </div>

                <div class="col s6">
                  <label>Balance between personal and work life </label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Balance"></mat-slider>

                    <!--<input type="text" id="balance" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Balance" required />-->
                  </p>
                </div>

                <div class="col s6">
                  <label>Self-awareness </label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_SelfAware"></mat-slider>

                    <!--<input type="text" id="seflawareness" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_SelfAware" required />-->
                  </p>
                </div>

                <div class="col s6">
                  <label>Career management </label>
                  <p class="range-field">

                    <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Career"></mat-slider>

                    <!--<input type="text" id="career" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Career" required />-->
                  </p>
                </div>

              </mat-card-content>

            </mat-card>



          </div>

          <mat-card>
            <mat-card-header>
              <mat-card-title>Leading Others</mat-card-title>
              <mat-card-subtitle></mat-card-subtitle>
            </mat-card-header>

            <mat-divider [inset]="true"></mat-divider>

            <mat-card-content>

              <div class="col s6">

                <label>Leading employees</label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Leading"></mat-slider>

                  <!--<input type="text" id="leading" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Leading" required />-->
                </p>
              </div>

              <div class="col s6">

                <label>Confronting problem employees</label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Confront"></mat-slider>

                  <!--                    <input type="text" id="confront" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Confront" required />-->
                </p>
              </div>

              <div class="col s6">

                <label>Participative </label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Confront"></mat-slider>

                  <!--<input type="text" id="participative" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Participative" required />-->
                </p>
              </div>

              <div class="col s6">

                <label>Building collaborative relationships </label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Build"></mat-slider>

                  <!--<input type="text" id="buid" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Build" required />-->
                </p>
              </div>

              <div class="col s6">
                <label>Compassion</label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Compassion"></mat-slider>

                  <!--<input type="text" id="compassion" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Compassion" required />-->
                </p>
              </div>

              <div class="col s6">
                <label>Putting people at ease</label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Putting"></mat-slider>

                  <!--<input type="text" id="putting" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Putting" required />-->
                </p>
              </div>

              <div class="col s6">
                <label>Respect for differences</label>
                <p class="range-field">

                  <mat-slider min="1" max="5" step="0.1" thumbLabel formControlName="BMK_Mean_Respect"></mat-slider>

                  <!--<input type="text" id="respect" min="0" max="5" step="0.1" class="validate" formControlName="BMK_Mean_Respect" required />-->
                </p>
              </div>

            </mat-card-content>

          </mat-card>




          <mat-card>




            <mat-card-actions>

              <button type="submit" class="btn waves-effect waves-light blue darken-4"
                      [disabled]="!predictionForm.valid">
                Predict
                <i class="material-icons right">cloud</i>
              </button>

              <span class="right"></span>

              <a class="btn waves-effect waves-light right"
                 (click)="resetForm()">
                Reset
                <i class="material-icons right">clear</i>
              </a>

            </mat-card-actions>


          </mat-card>

Answer 1

mat-card is displayed as block, that means you need add some css properties to the parent or card itself. This is a basic example using flex-box:

<div style="display: flex;">
    <mat-card style="flex: 1 1 auto;">Card 1</mat-card>
    <mat-card style="flex: 1 1 auto;">Card 2</mat-card>
</div>