JSFiddle - React, Tailwind, and code Playground

by jorgeluis

HTML

<div class="container">

  <div class="main">
    <h1>
      The main section
    </h1>
    <p>
    This can be varying height. Using flexbox, keep the boxes on the right column at the top and wrap as necessary.
    </p>
    
    <p>
    Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. </p>
    <p>It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged.</p>
    <p>It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.
    </p>
  </div>
  
  <div class="aside">
    <div class='item'></div>
    <div class='item'></div>
    <div class='item'></div>
  </div>
</div>

CSS

.container {
  display: flex;
  justify-content: center;
  max-width: 900px;
  margin: 0 auto;
  gap: 2rem;
}
.main {
  width: 66%;
}
.aside {
  width: 33%;
  display: flex;
  flex-wrap: wrap;
  align-content: flex-start;
  margin: 0 -5px;
}
.item {
  background: gray;
  width: 100px;
  height: 50px;
  margin: 5px;
}