JSFiddle - React, Tailwind, and code Playground

by Derek Wood

HTML

<section class='overview'>

  <aside class='area attendance'>
    attendance
  </aside>
  
  <aside class='area payments'>
    payments
  </aside>

</section>


<section class='activity'>
  
   <aside class="activity-list">
     <ul class="item-list">
       <li class="item">
         <a class="link">Activity</a>
       </li>
     </ul>
   </aside>
  
</section>

CSS

.overview {
  border: 1px solid red;
  display: flex;
  flex-direction: row;
  justify-content: space-between;
}

.overview .area {
  border: 1px solid blue;
  flex-basis: 50%;
  padding: 1rem;
}

.activity {
  position: relative; /* so what? */
  border: 1px solid green;
}

.activity .activity-list {
  border: 1px solid orange;
}

.activity-list .link {
  display: block;
  padding: 1rem;
}