JSFiddle - React, Tailwind, and code Playground

by AnnMariePrice

HTML

<div>
  <aside><strong>Drinks</strong>
    <ul>
      <li>coffee</li>
      <li>tea</li>
      <li>water</li>
    </ul>
  </aside>
  <aside><strong>Fruits</strong>
    <ul>
      <li>apple</li>
      <li>pear</li>
      <li>banana</li>
    </ul>
  </aside>
  <aside><strong>Sports</strong>
    <ul>
      <li>basketball</li>
      <li>baseball</li>
      <li>soccer</li>
    </ul>
  </aside>
  <p>
    Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur malesuada lacus velit, ac rutrum velit semper id. Nullam nisi libero, gravida ut varius quis, euismod ultrices nisi. Etiam efficitur euismod massa non accumsan. Phasellus at justo tincidunt,
    cursus turpis quis, ultricies magna. Quisque pulvinar pharetra vulputate. In ut ipsum eu dui tristique imperdiet in a tellus. Mauris volutpat enim eget odio laoreet tincidunt. Sed metus ipsum, pretium sed lacus at, varius varius erat. Quisque non
    ipsum mi. Praesent tincidunt non nisl a venenatis.</p>
</div>

CSS

p {
  line-height: 250%;

}

aside {
  width: 20%;
  border: thin solid green;
  margin: 5px;
  padding: 5px;
  float: right;
  clear: right
}