JSFiddle - React, Tailwind, and code Playground

by gRoberts

HTML

<div class="row">
  <div class="col">
    <ul>
      <li><label for="category-1">Category 1</label></li>
      <li><label for="category-2">Category 2</label></li>
      <li><label for="category-3">Category 3</label></li>
      <li><label for="category-4">Category 4</label></li>
      <li><label for="category-5">Category 5</label></li>
      <li><label for="category-6">Category 6</label></li>
      <li><label for="category-7">Category 7</label></li>
      <li><label for="category-8">Category 8</label></li>
      <li><label for="category-9">Category 9</label></li>
      <li><label for="category-10">Category 10</label></li>
    </ul>
  </div>
  <div class="col">
    <input type="radio" checked="checked" name="category" id="category-1" value="category-1">
    <div>
      <div>
        <h2>Category 1</h2>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta illum beatae, fugiat error, non ad possimus ipsa vero, pariatur aliquam facilis rem nam expedita modi porro officia. Unde expedita nisi adipisci rerum architecto, quidem error.</p>
        <p>Sed quasi facilis reprehenderit, ea temporibus vitae explicabo repudiandae modi possimus ut quod id, adipisci, ab veniam numquam dolore ipsum libero repellat pariatur ratione. Temporibus ipsa mollitia vitae deleniti aut?</p>
        <p>Quae quo suscipit architecto voluptate repellendus earum velit culpa molestias, placeat provident dolor pariatur consequuntur, voluptatum nihil harum maxime corporis eum sequi! Totam voluptas vel sunt. Aut tenetur, laudantium et.</p>
        <p>Lorem ipsum dolor sit amet, consectetur adipisicing elit. Nostrum adipisci quas accusantium minus in illo, ex reiciendis rem autem blanditiis. Nobis nam ex ut quasi, molestias repellendus tenetur totam numquam?</p>
        <p>Ipsam omnis nulla dicta...

SCSS

.row {
  display: flex;
  gap: 2rem;
  .col {
    &:first-child {
      flex: 1 0 20%;
    }
    &:last-child {
      & > div {
        grid-template-rows: 1fr;
        opacity: 1;
        display: grid;
        transition: grid-template-rows 250ms ease, opacity 250ms ease;
        div {
          overflow: hidden;
        }
      }
      input {
        position: absolute;
        left: -100%;
        opacity: 0;
        &:not(:checked) {
          & + div {
            grid-template-rows: 0;
            opacity: 0;
          }
        }
      }
    }
  }
}
ul {
  margin: 0;
  padding: 0;
  list-style: none;
}

.row {
  position: relative;
  input {
    position: absolute;
    left: -100%;
    top: 0;
    opacity: 0;
  }
}

JavaScript

(($) => {
	$(document).on('focus', 'input', (e) => e.preventDefault());
})(jQuery);