JSFiddle - React, Tailwind, and code Playground

by Amin Kodaganur

HTML

<div class="items">
  <div class="item sidebar">
    <p>The balloons sometimes congregate for mass launches, raising the possibility of one landing in your garden. The balloons sometimes congregate for mass launches, raising the possibility of one landing in your garden.</p>
  </div>
  <div class="item main">
    <p>The balloons sometimes congregate for mass launches, raising the possibility of one landing in your garden.The balloons sometimes congregate for mass launches, raising the possibility of one landing in your garden.The balloons sometimes congregate for mass launches, raising the possibility of one landing in your garden.The balloons sometimes congregate for mass launches, raising the possibility of one landing in your garden.The balloons sometimes congregate for mass launches, raising the possibility of one landing in your garden. raising the possibility of one landing in your garden. raising the possibility of one landing in your garden. raising the possibility of one landing in your garden.</p>
  </div>
  <div class="item aside">
    <p>The balloons sometimes congregate for mass launches, raising the possibility of one landing in your garden.</p>
  </div>
</div>

CSS

.items{
  display: flex;
}
.item{
  background-color: #ccc;
  border: 1px solid #000;
  min-height: 100px;
  padding: 5px;
}
.sidebar{
  width : 30%;
}
.main{
  width : 60%;
}
.aside{
  width : 30%;
}