open-consul/ui/packages/consul-ui/app/components/composite-row/layout.scss

%composite-row {
  display: grid;
  grid-template-columns: auto 50px;
  grid-template-rows: 50% 50%;

  grid-template-areas:
    'header actions'
    'detail actions';
}
%with-one-action-row {
  @extend %composite-row;
  grid-template-columns: 1fr auto;
  padding-right: 12px;
}
%composite-row-header {
  grid-area: header;
  align-self: start;
}
%composite-row-detail {
  grid-area: detail;
  align-self: end;
}
%composite-row-detail * {
  flex-wrap: nowrap !important;
}
%composite-row-actions {
  grid-area: actions;
  justify-self: center;
  align-self: center;
}

%composite-row-header:nth-last-child(2) {
  grid-column-start: header;
  grid-column-end: actions;
}
%composite-row-detail:last-child {
  grid-column-start: detail;
  grid-column-end: actions;
}