md-カード内で2つのmdコンテンツが隣にあります

Question

1つのMDカードに2つのコンテンツ「ボックス」を取得しようとしています。ユーザーがテキストフィールドを入力できる場所と、反対側にロゴが必要な場所。

<md-card ng-controller="AuthenticationController"> 
    <md-content class="left_side" layout-align="center center"> 

    </md-content> 

    <md-content class="right_side" layout-align="right"> 

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

CSS

.left_side { 
    height: 100%; 
    width: 50%; 
    background-color: blue; 
    display: flex; 
} 

    .right_side { 
    height: 100%; 
    width: 50%; 
    background-color: red; 
    display: flex; 
    margin-right: 0px; 
} 

私はそれは非常に簡単だと思うが、どういうわけか、私はそれを得るいけないので、間違った考え続けます。

Answer 1

これは私

<div ng-controller="AppCtrl" class="md-padding selectdemoBasicUsage" ng-cloak="" ng-app="MyApp" id="container"> 
    <md-content class="md-padding" layout-xs="column" layout="row" layout-align="center center"> 
     <div flex-xs flex-gt-xs="70" layout="column" layout-align="center center"> 
      <md-card layout="row" ng-controller="AppCtrl" layout-align="center center"> 

       <md-content class="left_side" layout-align="center center" layout="column"> 

        <md-content id="headerTxt">Welkom!</md-content> <br> 
        <md-content id="formContent" md-colors="orange"> 

         <form id="formDetails" ng-submit="" layout="column"> 
          <md-input-container class="md-default-theme-theme md-input-has-value"> 
           <input autofocus="" autocomplete="off" ng-model="credentials.username" required="" id="input_0" aria-invalid="false" style=""> 
           <div class="md-errors-spacer"></div> 
           <label translate="" class="capitalize ng-scope" for="input_0">Gebruikersnaam</label> 
          </md-input-container> 

          <md-input-container> 
           <input type="password" ng-model="credentials.password" required="" id="input_1" aria-invalid="false" style=""> 
           <div class="md-errors-spacer"></div> 
           <label translate="" for="input_1">Wachtwoord</label> 
          </md-input-container> 
          <div layout="row" layout-align="end center" class="layout-align-end-center layout-row"> 

           <button class="md-primary md-raised capitalize md-button md-default-theme-theme md-ink-ripple" type="submit" 
             ng-disabled="authenticationForm.$invalid || authenticationForm.proccess.$state.busy">INLOGGEN</button> 
          </div> 

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

       <md-content class="right_side" layout-align="center center"> 

        <img width="100px" height="100px"> 
       </md-content> 
      </md-card> 
     </div> 
    </md-content> 
</div> 

のためのトリックを行いました