title: How to make two responsive columns inside the mat-card-content using fxLayout?
body: <p>Here is my <strong>HTML</strong> code snippet:</p>
  
  <pre><code>&lt;mat-card-content&gt;
      &lt;div fxLayout="row" fxFlex="1 0 0"&gt;
          &lt;div fxLayout="column"&gt;First&lt;/div&gt;
          &lt;div fxLayout="column" style="margin-left:auto"&gt;Second&lt;/div&gt;
      &lt;/div&gt;
  &lt;/mat-card-content&gt;
  </code></pre>
  
  <p>And <strong>CSS</strong>: </p>
  
  <pre><code>.mat-card-content {
      color: rgba(0, 0, 0, 0.700);
  }
  </code></pre>
  
  <p>I need to implement flex layouts inside the angular material card element so that two columns will responsive and will contain some text like in the magazine:
  <img src="https://camo.githubusercontent.com/03fd5813f8559b568f1faff2e5e697072aca741f/68747470733a2f2f776166666c65696f2d6469726563742d75706c6f6164732d70726f64756374696f6e2e73332e616d617a6f6e6177732e636f6d2f75706c6f6164732f3562396661306538656130626466303031323564366265362f313235353136633636653832633732386163653231653064343666396337643836666330393362623830653362613430623031666161643637633435373237373738353161303238373464316235373065633130326235313065353834616165343035313063343665656535396236396637653836383266643730353431623839333766353536366337336131626164626438363136623930306265323738663466383662656235393830312e6a7067" alt="img"></p>
  
  <p>At this moment I have done mat-card-header and it's working right.
  Any advice will be much appreciated.</p>