html – Match all controls to dialog [ All resolution ]

I’m mew to CSS. I need to obtain a responsive design ( No want in cellular simply all desktop sizes ).
So we have now to show a type in a dialog and all of the controls have to be slot in to the dialog ( no backside white house )

Trace: In order I assume we will deal with this by rising textual content aria peak however I do not know the way ?

At present we have now following design:

We need to like this:

Guys please recommend me find out how to deal with this?

CSS :

 .container {
  show: flex;
  flex-direction: column;
  place: relative;
  peak: 100%;

  .content material {
    width: 100%;
    show: grid;
    margin-top: 10px;

    grid-column-gap: 1.2rem;
    grid-row-gap: 0.1rem;

    grid-template-areas:
      "title title title model model model"
      "desc desc desc data data data"
      "disclouser disclouser disclouser rational rational rational"
    ;

    .title {
      grid-area: title;
    }

    .rational {
      grid-area: rational;
    }

    .model {
      grid-area: model;
    }

    .desc {
      grid-area: desc;
    }

    .data {
      grid-area: data;
    }

    .disclouser {
      grid-area: disclouser;
    }

    .buttons-container {
      grid-area: buttons;
      show: flex;
      justify-content: flex-end;
    }
  }
}

Html:

 <foremost class="container mat-typography" id="dialog-container-elememt">

    <div class="content material">
</div>
</foremost>