*,
*::after,
*::before {
  margin: 0;
  padding: 0;
  box-sizing: border-box;
}
hr {
  margin-block: 20px;
}
mark {
  background-color: red;
  padding: 10px;
  color: white;
}
.container {
  max-width: 1000px;
  margin-inline: auto;
  margin-block: 20px;
  border: 1px solid red;
  padding: 20px;
}
.container :is(h1, h2, h3) {
  margin-bottom: 20px;
}
.parent-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(min(200px, 100%), 1fr));
  gap: 10px;
}
.child-grid,
.child-flex {
  border: 1px solid green;
}
/* Flex  for equal width */
/* .parent-flex {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
}
.parent-flex > * {
  flex: 1;
} */

.parent-flex {
  display: flex;
  align-items: start;
  flex-wrap: wrap;
  gap: 1em;
}

.parent-flex > :nth-child(1) {
  flex-basis: 500px;
  flex-grow: 9999;
}
.parent-flex > :nth-child(2) {
  flex-basis: 200px;
  flex-grow: 1;
  /* display: none; */
}