Flex Playground

by jorgeluis

HTML

<div class="parent">

  <div class="child">
    <h2>
    Some bigger section
    </h2>
    <p>
    With a lot more content than the rest of the boxes. This is the main focus and should be dynamically sized. 
    </p>
  </div>
  
  <div class="child">
    <div class="box">some text</div>
    <div class="box">some text</div>
    <div class="box">some text</div>
  </div>
  
</div>

CSS

.parent {
  display: flex;
  gap: 1rem;
  flex-wrap: wrap;
  justify-content: space-between;
}

.child:first-of-type {
  background: white;
  flex: 1;
  min-width: 420px;
}
.child:last-of-type {
  display: flex;
  gap: 1rem;
  min-width: 600px;
}

.box {
  background: aliceblue;
  padding: 2rem;
  width: 20%;
  min-width: 200px;
  max-width: 260px;
  justify-self: flex-end;
}