Css Flexbox Display Issue

It is kind of tricky situation I am in now. I have two templates that need to be displayed based on ng-switch like:

Copy

and your css should be something like

.summary-card {
  display: flex;
  width: 350px
}

.cool-grid {
  display: flex;
  flex-wrap: wrap;
}

check this out :- https://codepen.io/anon/pen/gzomoN

This is not the complete answer but it will give you some idea

you can also use grid layout if you want

.summary-card {
  display: grid;
  grid-template-columns: 200px auto;
  grid-coloumn-start: 1;
  grid-column-end: 1;
}

.cool-grid {
  grid-template-columns: 200px auto;
  grid-coloumn-start: 1;
  grid-column-end: 3;
  display: inline-grid;
  flex-wrap: wrap;
}