title: 4 column layout inside angular material dialog
body: <p>I need to display 4 columns inside material dialog with out bootstrap. Its coming clutter and its not responsive as well. I tried with flexbox and normal css as well. But no luck. I need 4 responsive columns, the first 3 is of rows depends on my model . But, the last one is individual column with row span (full)</p>
  
  <p><a href="https://i.stack.imgur.com/5QjRf.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/5QjRf.png" alt="enter image description here"></a></p>
  
  <pre><code>&lt;mat-dialog-content class="mat-typography" style="padding: 0;margin:0;"&gt;
      &lt;ul class="widthAuto"&gt;
          &lt;li style="width:70%;"&gt;
              &lt;div class='wrapper'&gt;
                  &lt;ng-container *ngFor="let columnInfo of columnsDefinitions"&gt;
                      &lt;ng-container *ngIf="columnInfo.isVisibleInsideFilterPopup"&gt;
                          &lt;div class='row'&gt;
                              &lt;div class='column first-col'&gt;
                                  &lt;label&gt;{{columnInfo.title}}&lt;/label&gt;
                                  &lt;!-- If any issue , add {{columnInfo.field}} and debug for more clarity  --&gt;
                              &lt;/div&gt;
                              &lt;div class='column justify-content-center'&gt;
                                  &lt;!-- CRITERIA SELECTION ACTION BUTTONS --&gt;
                                  &lt;ng-container *ngFor="let criteriaKey of objectKeys(columnInfo.filterCriteria)"&gt;
  
                                      &lt;span&gt;
                                          &lt;input type="submit" matTooltip=""
                                              class="button cursor-pointer"
  
                                              value="abc" /&gt;
                                      &lt;/span&gt;
                                  &lt;/ng-container&gt;
                              &lt;/div&gt;
                              &lt;div class='column'&gt;
                                  &lt;div [ngSwitch]="columnInfo.control"&gt;
                                     //All controls
                                  &lt;/div&gt;
                              &lt;/div&gt;
                          &lt;/div&gt;
                      &lt;/ng-container&gt;
                  &lt;/ng-container&gt;
              &lt;/div&gt;
          &lt;/li&gt;
          &lt;li style="width:30%;background:pink;vertical-align: top"&gt;
              &lt;ul style=" padding: 0px;"&gt;
                  &lt;li&gt;
                      &lt;label class="bold"&gt;Fruit:&lt;/label&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Apple&lt;/li&gt;
                          &lt;li&gt;Pear&lt;/li&gt;
                          &lt;li&gt;Organge&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Apple&lt;/li&gt;
                          &lt;li&gt;Pear&lt;/li&gt;
                          &lt;li&gt;Organge&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Apple&lt;/li&gt;
                          &lt;li&gt;Pear&lt;/li&gt;
                          &lt;li&gt;Organge&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Apple&lt;/li&gt;
                          &lt;li&gt;Pear&lt;/li&gt;
                          &lt;li&gt;Organge&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Apple&lt;/li&gt;
                          &lt;li&gt;Pear&lt;/li&gt;
                          &lt;li&gt;Organge&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Apple&lt;/li&gt;
                          &lt;li&gt;Pear&lt;/li&gt;
                          &lt;li&gt;Organge&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Apple&lt;/li&gt;
                          &lt;li&gt;Pear&lt;/li&gt;
                          &lt;li&gt;Organge&lt;/li&gt;
                      &lt;/ul&gt;
                      &lt;ul&gt;
                          &lt;li&gt;Apple&lt;/li&gt;
                          &lt;li&gt;Pear&lt;/li&gt;
                          &lt;li&gt;Organge&lt;/li&gt;
                      &lt;/ul&gt;
  
                  &lt;/li&gt;
                  &lt;br /&gt;
  
  
              &lt;/ul&gt;
  
          &lt;/li&gt;
      &lt;/ul&gt;
  &lt;/mat-dialog-content&gt;
  </code></pre>
  
  <pre><code>.wrapper {
      margin: 1px;
    }
  
    .row {
      display: flex;
      flex-direction: row;
      flex-wrap: wrap;
      width: 100%;margin-bottom:5px;
    }
  
    .column {
      display: flex;
      /* flex-direction: column; */
      flex-basis: 100%;
      flex: 1;
      margin:auto;
    }
  
    .justify-content-center{
      justify-content: center;
    }
  
  .first-col{
      flex: 0 0 76px;
  }
  .widthAuto{
      width:auto;
  }
  </code></pre>