Accordion Toggle on Mobile, pure CSS

HTML

<div class="container">
  <div class="row">
    <div class="col col-1">

      <input class="toggle toggle-inputs" id="toggle1" type="checkbox" />
      <label class="toggle-inputs" for="toggle1">Toggle</label>

      <div class="mobile-toggle">
        <p>
          Purr scratch the box or small kitty warm kitty little balls of fur, purrrrrr or meow loudly just to annoy owners hide head under blanket so no one can see. Scream at teh bath chase the pig around the house for give attitude, for see owner, run in terror
          lie on your belly and purr when you are asleep. Cough furball hiss at vacuum cleaner intently sniff hand. Sniff sniff climb a tree, wait for a fireman jump to fireman then scratch his face fooled again thinking the dog likes me for destroy the
          blinds, play riveting piece on synthesizer keyboard but lick sellotape. Caticus cuteicus fall asleep on the washing machine. And sometimes switches in french and say "miaou" just because well why not mewl for food at 4am or behind the couch.
          Inspect anything brought into the house spread kitty litter all over house.
        </p>
      </div>
    </div>

    <div class="col col-2">

      <input class="toggle toggle-inputs" id="toggle2" type="checkbox" />
      <label class="toggle-inputs" for="toggle2">Toggle</label>

      <div class="mobile-toggle">
        <p>Loved it, hated it, loved it, hated it instead of drinking water from the cat bowl, make sure to steal water from the toilet. Ears back wide eyed scratch at the door then walk away or make muffins, for fall asleep on the washing machine a nice
          warm laptop for me to sit on lies down . Walk on car leaving trail of paw prints on hood and windshield. Lick the other cats. Spend all night ensuring people don't sleep sleep all day hack up furballs and meow go back to sleep owner brings food
          and water tries to pet on head, so scratch get sprayed by water because bad cat yet sit in box. Jump off balcony, onto...

CSS

* {
  box-sizing: border-box;
}

p {
  line-height: 18px;
}

.container {
  overflow: hidden;
}

.col {
  width: 32%;
  margin: 10px 0.5%;
  float: left;
  overflow: hidden;
  padding: 20px;
  background: white;
}

.col-2 {
  background: #bfbfbf;
}

.col-3 {
  background: #bf0000;
}

.toggle-inputs {
  display: none;
}

@media (max-width: 768px) {
  

  .toggle-inputs {
    display: inline;
  }
  .mobile-toggle {
    max-height: 0px;
    overflow: hidden;
    -webkit-transition: max-height 0.3s ease-out;
    -o-transition: max-height 0.3s ease-out;
    -ms-transition: max-height 0.3s ease-out;
    transition: max-height 0.3s ease-out;
  }
  .col {
    width: 100%;
    float: none;
    margin-left: 0px;
    margin-right: 0px;
  }
}

.toggle:checked ~ .mobile-toggle {
  max-height: 2000px;
  /* make larger than it might ever be */
}